mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 04:51:51 +00:00
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:
+2
-2
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user