From 338128166d1d82341adecd382bfb84b4a4e4ec51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Sat, 16 Nov 2024 17:36:52 +0100
Subject: [PATCH] fix: adjust tooltip positionning

---
 apps/frontend/src/pages/Build/BuildDiffList.tsx | 13 +++++++------
 apps/frontend/src/ui/Tooltip.tsx                |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/pages/Build/BuildDiffList.tsx b/apps/frontend/src/pages/Build/BuildDiffList.tsx
index 0cec9e32..8735cfdb 100644
--- a/apps/frontend/src/pages/Build/BuildDiffList.tsx
+++ b/apps/frontend/src/pages/Build/BuildDiffList.tsx
@@ -601,10 +601,7 @@ function ListItem({
     <ListItemButton
       ref={ref}
       data-index={index}
-      className={clsx(
-        "group/item relative size-full cursor-default px-4 text-left focus:outline-none",
-        isSubItem && "pl-10",
-      )}
+      className="group/item relative size-full cursor-default text-left focus:outline-none"
       onPress={() => {
         if (item.diff) {
           setActiveDiff(item.diff);
@@ -675,7 +672,10 @@ function ListItem({
     status === EvaluationStatus.Rejected;
 
   return (
-    <div className="relative w-full" style={{ ...rowStyle, ...style }}>
+    <div
+      className={clsx("relative w-full px-4", isSubItem && "pl-10")}
+      style={{ ...rowStyle, ...style }}
+    >
       {isGroupItem && (
         <CardStack
           isFirst={item.first}
@@ -710,11 +710,12 @@ function DiffTooltip(props: {
   return (
     <RACTooltip
       triggerRef={props.triggerRef}
-      placement="right"
+      placement="right top"
       offset={8}
       className={(props) =>
         clsx("pointer-events-none w-72", getTooltipAnimationClassName(props))
       }
+      style={{ zIndex: 900 }}
     >
       <DiffCard active={false} status={EvaluationStatus.Pending}>
         <DiffImage diff={diff} />
diff --git a/apps/frontend/src/ui/Tooltip.tsx b/apps/frontend/src/ui/Tooltip.tsx
index 6cecb7f2..9e8ae7ac 100644
--- a/apps/frontend/src/ui/Tooltip.tsx
+++ b/apps/frontend/src/ui/Tooltip.tsx
@@ -82,7 +82,7 @@ const TooltipOverlay = React.forwardRef(
         {...props}
         className={(props) =>
           clsx(
-            "bg-subtle text z-50 overflow-hidden rounded-md border shadow-md",
+            "bg-subtle text overflow-hidden rounded-md border shadow-md",
             disableHoverableContent && "pointer-events-none",
             getTooltipAnimationClassName(props),
             variantClassName,