From 3abafab65e071d31eb7a045d93faf682d3e4551f 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.
---
 .../components/ScreenShareZoomControls.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
index a02ef003..73cee32b 100644
--- a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
@@ -91,7 +91,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: {
@@ -109,7 +111,7 @@ export const ScreenShareZoomControls = ({
               aria-label={t('fitToWindow')}
               onPress={onResetZoom}
             >
-              <RiFullscreenExitLine size={18} />
+              <RiFullscreenExitLine size={20} />
             </Button>
             <Button
               size="sm"
@@ -120,16 +122,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',
@@ -151,7 +153,7 @@ export const ScreenShareZoomControls = ({
           isDisabled={!canZoomIn}
           onPress={onZoomIn}
         >
-          <RiZoomInLine size={18} />
+          <RiZoomInLine size={20} />
         </Button>
         {isFullscreenAvailable && (
           <Button
@@ -163,9 +165,9 @@ export const ScreenShareZoomControls = ({
             onPress={toggleFullScreen}
           >
             {isFullscreen ? (
-              <RiCollapseDiagonalLine size={18} />
+              <RiCollapseDiagonalLine size={20} />
             ) : (
-              <RiExpandDiagonalLine size={18} />
+              <RiExpandDiagonalLine size={20} />
             )}
           </Button>
         )}