From 8e3cd3f9a3461797291948182ff9ca0650cafcf2 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 22 Jan 2026 10:01:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(style)=20adjust=20tooltip=20positi?=
 =?UTF-8?q?oning=20and=20fix=20ts=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

raise tooltip offset and set arrowBoundaryOffset
---
 src/frontend/src/primitives/TooltipWrapper.tsx   | 16 ++++++++++++----
 .../src/primitives/VisualOnlyTooltip.tsx         |  2 ++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx
index 825f770e..124e3adc 100644
--- a/src/frontend/src/primitives/TooltipWrapper.tsx
+++ b/src/frontend/src/primitives/TooltipWrapper.tsx
@@ -58,6 +58,8 @@ export const TooltipWrapper = ({
  *
  * Style taken from example at https://react-spectrum.adobe.com/react-aria/Tooltip.html
  */
+const DEFAULT_TOOLTIP_GAP_PX = 8
+
 const StyledTooltip = styled(RACTooltip, {
   base: {
     boxShadow: '0 8px 20px rgba(0 0 0 / 0.1)',
@@ -72,11 +74,11 @@ const StyledTooltip = styled(RACTooltip, {
     fontSize: 14,
     transform: 'translate3d(0, 0, 0)',
     '&[data-placement=top]': {
-      marginBottom: '2px',
+      marginBottom: `${DEFAULT_TOOLTIP_GAP_PX}px`,
       '--origin': 'translateY(4px)',
     },
     '&[data-placement=bottom]': {
-      marginTop: '2px',
+      marginTop: `${DEFAULT_TOOLTIP_GAP_PX}px`,
       '--origin': 'translateY(-4px)',
     },
     '&[data-placement=right]': {
@@ -126,10 +128,16 @@ const TooltipArrow = () => {
 
 const Tooltip = ({
   children,
+  arrowBoundaryOffset,
   ...props
-}: Omit<TooltipProps, 'children'> & { children: ReactNode }) => {
+}: {
+  children: ReactNode
+} & Partial<Omit<TooltipProps, 'children'>>) => {
   return (
-    <StyledTooltip {...props}>
+    <StyledTooltip
+      arrowBoundaryOffset={arrowBoundaryOffset ?? 0}
+      {...props}
+    >
       <TooltipArrow />
       {children}
     </StyledTooltip>
diff --git a/src/frontend/src/primitives/VisualOnlyTooltip.tsx b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
index f65ec3f5..c7a4e567 100644
--- a/src/frontend/src/primitives/VisualOnlyTooltip.tsx
+++ b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
@@ -16,6 +16,8 @@ export type VisualOnlyTooltipProps = {
   tooltipPosition?: 'top' | 'bottom'
 }
 
+const TOOLTIP_VERTICAL_OFFSET_PX = 8
+
 /**
  * Wrapper component that displays a tooltip visually only (not announced by screen readers).
  *