From 16fd2dc4e88c41b93ead5d8a73484aa4b5a7b0cc Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 14:54:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20improve=20screen=20sha?=
 =?UTF-8?q?re=20zoom=20toolbar=20sizing=20and=20containment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Slightly enlarge toolbar controls while clipping hover states
inside the pill, so buttons no longer overflow the bar.
---
 .../livekit/components/ScreenShareZoomControls.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
index 53c14213..7a0e8fab 100644
--- a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
@@ -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>