From ee857689406a472e38b5178907d130c6eeb226f6 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 May 2026 15:53:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20use=20a=20semant?=
 =?UTF-8?q?ic=20CSS=20token=20for=20tooltip=20positioning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the hard-coded tooltip offset with a semantic CSS token,
making it possible to override the spacing per context (e.g.
tighter spacing in the PiP window where vertical room is scarce).

Co-authored-by: Cyril <c.gromoff@gmail.com>
---
 src/frontend/panda.config.ts                   |  1 +
 src/frontend/src/primitives/TooltipWrapper.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index c98804ac..cce15d18 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -279,6 +279,7 @@ const config: Config = {
         'room-side-panel-margin': { value: '1.5rem' },
         'room-control-bar': { value: '80px' },
         'room-reaction-toolbar-height': { value: '42px' },
+        'tooltip-spacing': { value: '8px' },
       },
       spacing,
     }),
diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx
index c918e666..8dac11ad 100644
--- a/src/frontend/src/primitives/TooltipWrapper.tsx
+++ b/src/frontend/src/primitives/TooltipWrapper.tsx
@@ -48,31 +48,31 @@ export const TooltipWrapper = ({
  */
 const StyledTooltip = styled(RACTooltip, {
   base: {
-    boxShadow: '0 8px 20px rgba(0 0 0 / 0.1)',
+    boxShadow: '0 var(--sizes-tooltip-spacing) 20px rgba(0 0 0 / 0.1)',
     borderRadius: '4px',
     backgroundColor: 'primaryDark.100',
     color: 'gray.100',
     forcedColorAdjust: 'none',
     outline: 'none',
-    padding: '2px 8px',
+    padding: '2px var(--sizes-tooltip-spacing)',
     maxWidth: '200px',
     textAlign: 'center',
     fontSize: 14,
     transform: 'translate3d(0, 0, 0)',
     '&[data-placement=top]': {
-      marginBottom: '8px',
+      marginBottom: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateY(4px)',
     },
     '&[data-placement=bottom]': {
-      marginTop: '8px',
+      marginTop: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateY(-4px)',
     },
     '&[data-placement=right]': {
-      marginLeft: '8px',
+      marginLeft: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateX(-4px)',
     },
     '&[data-placement=left]': {
-      marginRight: '8px',
+      marginRight: 'var(--sizes-tooltip-spacing)',
       '--origin': 'translateX(4px)',
     },
     '& .react-aria-OverlayArrow svg': {