From 58205f81d4cffc1f5f9e538b1510e2951b46c1fc Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 5 Aug 2026 13:42:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20icon=20centering?=
 =?UTF-8?q?=20in=20the=20Switch=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons inside the Switch primitive were not properly centered.

Use relative sizes for the icons and switch to a grid-based
placement strategy so they stay centered regardless of the switch
size.
---
 CHANGELOG.md                           |  1 +
 src/frontend/src/primitives/Switch.tsx | 37 +++++++++++++-------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e8f586c..79bc89eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,7 @@ and this project adheres to
 - 🐛(frontend) stop the installed app reopening the room it came from
 - 🐛(backend) serialize lazy title in summary payload
 - 💄(frontend) show pointer cursor on interactive switches
+- 🐛(frontend) fix icon centering in the Switch primitive
 
 ## [1.24.0] - 2026-07-21
 
diff --git a/src/frontend/src/primitives/Switch.tsx b/src/frontend/src/primitives/Switch.tsx
index 91d4a567..8713be28 100644
--- a/src/frontend/src/primitives/Switch.tsx
+++ b/src/frontend/src/primitives/Switch.tsx
@@ -35,30 +35,29 @@ const StyledSwitch = styled(RACSwitch, {
         transitionDelay: '0ms',
       },
     },
-    '& .checkmark': {
+    '& .checkmark, & .cross': {
       position: 'absolute',
-      display: 'block',
-      top: '50%',
-      right: '0.1rem',
-      transform: 'translateY(-50%)',
-      color: 'primary.800',
-      fontSize: '0.75rem',
-      fontWeight: 'bold',
+      top: 0,
+      bottom: 0,
+      width: '1.313rem', // knob width + 2 × knob margin
+      display: 'grid',
+      placeItems: 'center',
       pointerEvents: 'none',
       zIndex: 1,
+      '& svg': {
+        display: 'block',
+        width: '0.875rem',
+        height: '0.875rem',
+      },
+    },
+    '& .checkmark': {
+      right: 0,
+      color: 'primary.800',
       opacity: 0,
     },
     '& .cross': {
-      position: 'absolute',
-      display: 'block',
-      top: '50%',
-      left: '0.13rem',
-      transform: 'translateY(-50%)',
+      left: 0,
       color: 'white',
-      fontSize: '0.70rem',
-      fontWeight: 'bold',
-      pointerEvents: 'none',
-      zIndex: 1,
       opacity: 1,
       transition: 'opacity 200ms',
       transitionDelay: '0ms',
@@ -115,10 +114,10 @@ export const Switch = ({ children, ...props }: SwitchProps) => (
       <>
         <div className="indicator">
           <span className="checkmark" aria-hidden="true">
-            <RiCheckLine size={16} />
+            <RiCheckLine />
           </span>
           <span className="cross" aria-hidden="true">
-            <RiCloseFill size={16} />
+            <RiCloseFill />
           </span>
         </div>
         {typeof children === 'function' ? children(renderProps) : children}