From c15cb22be49780382803a7caab0cf7a4eb2902e2 Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Wed, 29 Jul 2026 07:20:43 +0200
Subject: [PATCH] Adopt the shared ScrollArea for app-wide scrolling

---
 src/components/bootstrap/BootstrapWizard.tsx | 11 +++++----
 src/components/forms/FieldWidget.tsx         |  7 ++++--
 src/components/layout/Sidebar.tsx            |  7 +++---
 src/components/ui/command.tsx                |  9 ++++----
 src/components/ui/scroll-area.tsx            | 13 ++++++++---
 src/pages/AdminPanel.tsx                     | 24 ++++++++++++--------
 6 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/components/bootstrap/BootstrapWizard.tsx b/src/components/bootstrap/BootstrapWizard.tsx
index 4674e0e..02724d2 100644
--- a/src/components/bootstrap/BootstrapWizard.tsx
+++ b/src/components/bootstrap/BootstrapWizard.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { ArrowLeft, ArrowRight, Check, Copy, Loader2, Rocket } from 'lucide-react';
 
 import { useSchemaStore } from '@/stores/schemaStore';
@@ -403,13 +404,15 @@ export function BootstrapWizard() {
 
 function WizardShell({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col bg-content-background">
+    <div className="flex h-screen flex-col bg-content-background">
       <header className="flex items-center px-6 py-4 border-b bg-background">
         <DefaultLogo />
       </header>
-      <main className="flex-1 overflow-auto p-6">
-        <div className="mx-auto max-w-3xl">{children}</div>
-      </main>
+      <ScrollArea role="main" className="flex-1">
+        <div className="p-6">
+          <div className="mx-auto max-w-3xl">{children}</div>
+        </div>
+      </ScrollArea>
     </div>
   );
 }
diff --git a/src/components/forms/FieldWidget.tsx b/src/components/forms/FieldWidget.tsx
index 445d1fb..5ba3b52 100644
--- a/src/components/forms/FieldWidget.tsx
+++ b/src/components/forms/FieldWidget.tsx
@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -1831,7 +1832,8 @@ function EnumMultiSelect({ enumName, items, onChange, readOnly, schema, minItems
                 className="h-8"
               />
             </div>
-            <div className="max-h-60 overflow-y-auto p-2 space-y-1">
+            <ScrollArea viewportClassName="max-h-60">
+              <div className="p-2 space-y-1">
               {filtered.length === 0 && (
                 <p className="text-sm text-muted-foreground text-center py-2">{t('field.noMatches', 'No matches')}</p>
               )}
@@ -1859,7 +1861,8 @@ function EnumMultiSelect({ enumName, items, onChange, readOnly, schema, minItems
                   </Label>
                 </div>
               ))}
-            </div>
+              </div>
+            </ScrollArea>
           </PopoverContent>
         </Popover>
       </div>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index b6b4af5..2e33fb5 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -12,6 +12,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useUIStore } from '@/stores/uiStore';
 import { useAccountStore } from '@/stores/accountStore';
@@ -342,8 +343,8 @@ export function Sidebar() {
         onClick={() => setSidebarOpen(false)}
       />
       <aside className="fixed top-14 left-0 bottom-0 z-30 flex w-64 flex-col border-r bg-background">
-        <div className="flex-1 overflow-y-auto py-2 [scrollbar-width:thin]">
-          <nav ref={navRef} className="flex flex-col gap-0.5 px-2">
+        <ScrollArea className="flex-1">
+          <nav ref={navRef} className="flex flex-col gap-0.5 px-2 py-2">
             {layout.items.map((item) => (
               <SidebarTopItem
                 key={'link' in item ? item.link.viewName : item.container.name}
@@ -356,7 +357,7 @@ export function Sidebar() {
               />
             ))}
           </nav>
-        </div>
+        </ScrollArea>
 
         {layouts.length > 1 && (
           <TooltipProvider>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index cbc86cf..b0c2d4b 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -11,6 +11,7 @@ import { Search } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 const Command = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive>,
@@ -61,11 +62,9 @@ const CommandList = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
+  <ScrollArea viewportClassName="max-h-[300px]">
+    <CommandPrimitive.List ref={ref} className={cn('overflow-x-hidden', className)} {...props} />
+  </ScrollArea>
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
 
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index d5731b4..c2012ca 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -11,10 +11,17 @@ import { cn } from '@/lib/utils';
 
 const ScrollArea = React.forwardRef<
   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    // Height caps (max-h-*) must be applied to the Viewport — the actual
+    // scroller — because a percentage height resolves to auto when the
+    // Root's height is content-driven, which would break scrolling.
+    viewportClassName?: string;
+  }
+>(({ className, viewportClassName, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport className={cn('h-full w-full rounded-[inherit]', viewportClassName)}>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
diff --git a/src/pages/AdminPanel.tsx b/src/pages/AdminPanel.tsx
index dfa7ad5..0b3bb55 100644
--- a/src/pages/AdminPanel.tsx
+++ b/src/pages/AdminPanel.tsx
@@ -16,6 +16,7 @@ import { setLocale } from '@/i18n';
 import { TopBar } from '@/components/layout/TopBar';
 import { Sidebar } from '@/components/layout/Sidebar';
 import { MainContent } from '@/components/layout/MainContent';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
 import { LoadingFallback } from '@/components/common/LoadingFallback';
 import {
@@ -249,20 +250,25 @@ export default function AdminPanel() {
     );
   }
 
+  // The shell is viewport-height so the main area scrolls internally through
+  // the shared ScrollArea instead of scrolling the whole window.
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex h-screen flex-col">
       <TopBar />
-      <div className="flex flex-1">
+      <div className="flex min-h-0 flex-1">
         <Sidebar />
-        <main
-          className={`flex-1 overflow-auto bg-content-background p-6 transition-[margin] ${sidebarOpen ? 'md:ml-64' : ''}`}
+        <ScrollArea
+          role="main"
+          className={`flex-1 bg-content-background transition-[margin] ${sidebarOpen ? 'md:ml-64' : ''}`}
         >
-          <div className="mx-auto w-full max-w-7xl">
-            <ErrorBoundary>
-              <MainContent viewName={viewName} id={id} section={section} />
-            </ErrorBoundary>
+          <div className="p-6">
+            <div className="mx-auto w-full max-w-7xl">
+              <ErrorBoundary>
+                <MainContent viewName={viewName} id={id} section={section} />
+              </ErrorBoundary>
+            </div>
           </div>
-        </main>
+        </ScrollArea>
       </div>
     </div>
   );