docs(ui): add changelog entry for drawer mobile scroll fix (#11199)

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).

ui/CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🐞 Fixed
 
 - Mute Findings modal now enforces the 100-character limit on the rule name input with a live counter and inline error, matching the existing reason field behaviour [(#11158)](https://github.com/prowler-cloud/prowler/pull/11158)
+- Finding detail drawer no longer scrolls horizontally on mobile; the section tab bar is now its own horizontal scroll container with a visible thin scrollbar, so the drawer body stays put while the tabs scroll [(#11199)](https://github.com/prowler-cloud/prowler/pull/11199)
 
 ### 🔐 Security
 

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>

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({

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 {