💄(frontend) improve screen share zoom toolbar sizing and containment

Slightly enlarge toolbar controls while clipping hover states
inside the pill, so buttons no longer overflow the bar.
This commit is contained in:
Cyril
2026-07-13 14:54:16 +02:00
committed by aleb_the_flash
parent 9791a8a3b2
commit 16fd2dc4e8
@@ -49,7 +49,9 @@ export const ScreenShareZoomControls = ({
className={css({
backgroundColor: 'primaryDark.50',
borderRadius: '2rem',
padding: '0.25rem',
padding: '0.5rem',
alignItems: 'center',
overflow: 'hidden',
opacity: 0.7,
transition: 'opacity 200ms linear',
_hover: {
@@ -67,7 +69,7 @@ export const ScreenShareZoomControls = ({
aria-label={t('fitToWindow')}
onPress={onResetZoom}
>
<RiFullscreenExitLine size={18} />
<RiFullscreenExitLine size={20} />
</Button>
<Button
size="sm"
@@ -78,16 +80,16 @@ export const ScreenShareZoomControls = ({
isDisabled={!canZoomOut}
onPress={onZoomOut}
>
<RiZoomOutLine size={18} />
<RiZoomOutLine size={20} />
</Button>
{/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
<span
aria-hidden="true"
className={css({
color: 'white',
fontSize: '0.75rem',
fontSize: '0.8125rem',
fontWeight: 500,
minWidth: '3rem',
minWidth: '3.25rem',
textAlign: 'center',
userSelect: 'none',
display: 'flex',
@@ -109,7 +111,7 @@ export const ScreenShareZoomControls = ({
isDisabled={!canZoomIn}
onPress={onZoomIn}
>
<RiZoomInLine size={18} />
<RiZoomInLine size={20} />
</Button>
<ScreenShareFullscreenButton containerRef={containerRef} />
</HStack>