From e691176612a90a378265c80a3f8955bb35dc6b34 Mon Sep 17 00:00:00 2001
From: "Hugo P.Brito" <hugopbrit@gmail.com>
Date: Mon, 18 May 2026 13:57:26 +0100
Subject: [PATCH] fix(ui): contain finding drawer horizontal scroll to the tab
 bar on mobile

On narrow screens the five section tabs (Finding Overview, Remediation,
Findings for this resource, Scans, Events) did not fit, and because they
had no dedicated scroll container the overflow leaked up to the resource
card (whose overflow-y-auto implicitly resolves overflow-x to auto),
scrolling the entire drawer body horizontally.

- TabsList is now its own horizontal scroll container: triggers keep
  their intrinsic size (shrink-0) and stay on one line (whitespace-nowrap)
  so a partially-visible tab plus a thin scrollbar make it obvious more
  tabs are reachable by scrolling.
- The resource card is pinned to overflow-x-hidden + min-w-0 so no child
  can force the drawer body to scroll sideways.
- minimal-scrollbar now sets a 6px height so the horizontal scrollbar is
  actually visible on WebKit (it previously only set width).
---
 .../resource-detail-drawer-content.tsx                   | 4 ++--
 ui/components/shadcn/tabs/tabs.tsx                       | 9 ++++++++-
 ui/styles/globals.css                                    | 1 +
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.tsx b/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.tsx
index 5cc3b7b298..b3f1a50ec4 100644
--- a/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.tsx
+++ b/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.tsx
@@ -681,7 +681,7 @@ export function ResourceDetailDrawerContent({
       </div>
 
       {/* Resource card */}
-      <div className="border-border-neutral-secondary bg-bg-neutral-secondary minimal-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto rounded-lg border p-4">
+      <div className="border-border-neutral-secondary bg-bg-neutral-secondary minimal-scrollbar flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-x-hidden overflow-y-auto rounded-lg border p-4">
         {/* Resource info — shows loading when currentFinding is not yet available */}
         {!currentResource && !f ? (
           <ResourceDetailSkeleton />
@@ -833,7 +833,7 @@ export function ResourceDetailDrawerContent({
           defaultValue="overview"
           className="mt-2 flex min-h-fit w-full flex-1 flex-col md:min-h-0"
         >
-          <div className="mb-4 flex items-center justify-between">
+          <div className="mb-4 flex min-w-0 items-center justify-between">
             <TabsList>
               <TabsTrigger value="overview">Finding Overview</TabsTrigger>
               <TabsTrigger value="remediation">Remediation</TabsTrigger>
diff --git a/ui/components/shadcn/tabs/tabs.tsx b/ui/components/shadcn/tabs/tabs.tsx
index fc593ca88d..572fd2f32d 100644
--- a/ui/components/shadcn/tabs/tabs.tsx
+++ b/ui/components/shadcn/tabs/tabs.tsx
@@ -44,9 +44,16 @@ function buildTriggerClassName(): string {
 
 /**
  * Build list className
+ *
+ * The tab bar is its own horizontal scroll container: when the triggers don't
+ * fit (e.g. narrow mobile widths) they scroll within the list instead of
+ * forcing the surrounding drawer/page content to overflow horizontally.
+ * Triggers keep their intrinsic size (`shrink-0`) and stay on a single line
+ * (`whitespace-nowrap`) so a partially-visible tab plus the thin scrollbar
+ * make it obvious that more tabs are reachable by scrolling.
  */
 function buildListClassName(): string {
-  return "inline-flex w-full items-center border-[#E9E9F0] dark:border-[#171D30]";
+  return "minimal-scrollbar inline-flex w-full max-w-full min-w-0 items-center overflow-x-auto overflow-y-hidden border-[#E9E9F0] dark:border-[#171D30] [&>button]:shrink-0 [&>button]:whitespace-nowrap";
 }
 
 function Tabs({
diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index 1d7587f748..2ab9535ecd 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -345,6 +345,7 @@
   /* Webkit browsers (Chrome, Safari, Edge) */
   .minimal-scrollbar::-webkit-scrollbar {
     width: 6px;
+    height: 6px; /* visible thumb for horizontal scroll containers (e.g. tab bars) */
   }
 
   .minimal-scrollbar::-webkit-scrollbar-track {