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).
This commit is contained in:
Hugo P.Brito
2026-05-18 13:57:26 +01:00
parent 5ca6e31f45
commit e691176612
3 changed files with 11 additions and 3 deletions
@@ -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>
+8 -1
View File
@@ -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({
+1
View File
@@ -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 {