From d305e72b5a9faa806dc9dc7be8eb257274811c54 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 24 Mar 2025 12:24:49 -0600
Subject: [PATCH] Update scroll area

---
 .../ui/layouts/AppLayout.stories.tsx          | 20 +----
 .../ui/layouts/AppPageLayout.stories.tsx      |  2 +-
 .../ui/layouts/AppPageLayoutContent.tsx       | 16 ++--
 .../ui/scroll-area/ScrollArea.stories.tsx     | 87 +++++++------------
 .../components/ui/scroll-area/ScrollArea.tsx  |  4 +-
 .../DashboardViewDashboardController.tsx      |  5 +-
 web/src/styles/buster.scss                    |  3 +-
 7 files changed, 49 insertions(+), 88 deletions(-)

diff --git a/web/src/components/ui/layouts/AppLayout.stories.tsx b/web/src/components/ui/layouts/AppLayout.stories.tsx
index 1edf7bd76..dd926d0f2 100644
--- a/web/src/components/ui/layouts/AppLayout.stories.tsx
+++ b/web/src/components/ui/layouts/AppLayout.stories.tsx
@@ -40,20 +40,6 @@ export const Default: Story = {
   }
 };
 
-export const WithSidebar: Story = {
-  args: {
-    children: <TestContent />,
-    sidebar: <div className="">Sidebar Content</div>
-  },
-  decorators: [
-    (Story) => (
-      <div className="bg-background-secondary" style={{ height: '600px', width: '100%' }}>
-        <Story />
-      </div>
-    )
-  ]
-};
-
 export const NonFloating: Story = {
   args: {
     children: <TestContent />,
@@ -66,14 +52,14 @@ export const WithAppPageLayout: Story = {
     sidebar: <div className="">Sidebar Content</div>,
     children: (
       <TestContent>
-        <AppPageLayout header="Page Header">
-          <div>
+        <AppPageLayout header="Page Header" scrollable>
+          <>
             {Array.from({ length: 30 }, (_, i) => (
               <div key={i} className="p-4">
                 List Item {i + 1} - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </div>
             ))}
-          </div>
+          </>
         </AppPageLayout>
       </TestContent>
     ),
diff --git a/web/src/components/ui/layouts/AppPageLayout.stories.tsx b/web/src/components/ui/layouts/AppPageLayout.stories.tsx
index 15cf35672..3fb756206 100644
--- a/web/src/components/ui/layouts/AppPageLayout.stories.tsx
+++ b/web/src/components/ui/layouts/AppPageLayout.stories.tsx
@@ -38,7 +38,7 @@ export const NonScrollable: Story = {
   args: {
     scrollable: false,
     header: <div className="bg-gray-100">Header Content</div>,
-    children: <div className="">Fixed Content</div>
+    children: <div className="h-full w-full border border-red-500 bg-red-100">Fixed Content</div>
   }
 };
 
diff --git a/web/src/components/ui/layouts/AppPageLayoutContent.tsx b/web/src/components/ui/layouts/AppPageLayoutContent.tsx
index c071768f6..f2eb2a73f 100644
--- a/web/src/components/ui/layouts/AppPageLayoutContent.tsx
+++ b/web/src/components/ui/layouts/AppPageLayoutContent.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { cn } from '@/lib/utils';
+import { ScrollArea } from '../scroll-area/ScrollArea';
 
 export const AppPageLayoutContent: React.FC<
   PropsWithChildren<{
@@ -7,15 +8,12 @@ export const AppPageLayoutContent: React.FC<
     scrollable?: boolean;
   }>
 > = ({ className = '', children, scrollable = true }) => {
+  const Selector = scrollable ? ScrollArea : 'main';
+  const ChildSelector = scrollable ? 'main' : React.Fragment;
+
   return (
-    <main
-      className={cn(
-        'app-content-page',
-        'bg-page-background app-content h-full max-h-[100%] overflow-hidden p-0',
-        scrollable && 'overflow-y-auto',
-        className
-      )}>
-      {children}
-    </main>
+    <Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}>
+      <ChildSelector>{children}</ChildSelector>
+    </Selector>
   );
 };
diff --git a/web/src/components/ui/scroll-area/ScrollArea.stories.tsx b/web/src/components/ui/scroll-area/ScrollArea.stories.tsx
index f91a7fa28..3747f36dd 100644
--- a/web/src/components/ui/scroll-area/ScrollArea.stories.tsx
+++ b/web/src/components/ui/scroll-area/ScrollArea.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ScrollArea } from './ScrollArea';
+import { ScrollArea, ScrollBar } from './ScrollArea';
+import { faker } from '@faker-js/faker';
+import Image from 'next/image';
 
 const meta = {
   title: 'UI/ScrollArea/ScrollArea',
@@ -59,61 +61,34 @@ export const TallContent: Story = {
 };
 
 export const WideContent: Story = {
-  render: () => (
-    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
-      <div className="w-[500px]">
-        <p className="mb-4">
-          This content is intentionally wider than the container to demonstrate horizontal
-          scrolling. The ScrollArea component will automatically add scrollbars as needed.
-        </p>
-        <div className="flex space-x-4">
-          {Array.from({ length: 10 }).map((_, i) => (
-            <div
-              key={i}
-              className="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-md bg-gray-200">
-              {i + 1}
-            </div>
+  render: () => {
+    const works = Array.from({ length: 50 }, (_, i) => ({
+      artist: `Artist ${i + 1}`,
+      art: faker.image.urlLoremFlickr({ category: 'food', width: 300, height: 400 })
+    }));
+
+    return (
+      <ScrollArea className="w-96 rounded-md border whitespace-nowrap">
+        <div className="flex w-max space-x-4 p-4">
+          {works.map((artwork) => (
+            <figure key={artwork.artist} className="shrink-0">
+              <div className="overflow-hidden rounded-md">
+                <Image
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  className="aspect-[3/4] h-fit w-fit object-cover"
+                  width={300}
+                  height={400}
+                />
+              </div>
+              <figcaption className="text-muted-foreground pt-2 text-xs">
+                Photo by <span className="text-foreground font-semibold">{artwork.artist}</span>
+              </figcaption>
+            </figure>
           ))}
         </div>
-      </div>
-    </ScrollArea>
-  )
-};
-
-export const CustomHeight: Story = {
-  render: () => (
-    <ScrollArea className="h-[400px] w-[350px] rounded-md border p-4">
-      <div>
-        <p className="mb-4 text-lg font-semibold">Taller Scroll Area</p>
-        {Array.from({ length: 20 }).map((_, i) => (
-          <p key={i} className="mb-4">
-            Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </p>
-        ))}
-      </div>
-    </ScrollArea>
-  )
-};
-
-export const NestedContent: Story = {
-  render: () => (
-    <ScrollArea className="h-[300px] w-[400px] rounded-md border p-4">
-      <div>
-        <h3 className="mb-4 text-lg font-semibold">Nested Content Example</h3>
-        <div className="mb-4">
-          <p className="mb-2">Main content area with some text.</p>
-          <div className="rounded-md border p-2">
-            <h4 className="mb-2 font-medium">Nested Section</h4>
-            <p>This is nested content inside the scroll area.</p>
-          </div>
-        </div>
-        {Array.from({ length: 10 }).map((_, i) => (
-          <div key={i} className="mb-4">
-            <h4 className="mb-1 font-medium">Section {i + 1}</h4>
-            <p>Additional content for demonstrating scrolling behavior.</p>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  )
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    );
+  }
 };
diff --git a/web/src/components/ui/scroll-area/ScrollArea.tsx b/web/src/components/ui/scroll-area/ScrollArea.tsx
index 9f93d7127..9ca3cee8c 100644
--- a/web/src/components/ui/scroll-area/ScrollArea.tsx
+++ b/web/src/components/ui/scroll-area/ScrollArea.tsx
@@ -13,7 +13,9 @@ const ScrollArea = React.forwardRef<
     ref={ref}
     className={cn('relative overflow-hidden', className)}
     {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport
+      className="h-full w-full rounded-[inherit]"
+      id="scroll-area-viewport">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx
index deda80bb6..17fb897f0 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx
@@ -10,6 +10,7 @@ import {
   useUpdateDashboardConfig
 } from '@/api/buster_rest/dashboards';
 import { useDashboardContentStore } from '@/context/Dashboards';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
   dashboardId,
@@ -24,7 +25,7 @@ export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
   const dashboard = dashboardResponse?.dashboard;
 
   return (
-    <div className="flex h-full flex-col space-y-3 overflow-y-auto p-10">
+    <ScrollArea className="flex h-full flex-col space-y-3 p-10">
       <DashboardEditTitles
         onUpdateDashboard={onUpdateDashboard}
         dashboardId={dashboardId}
@@ -40,6 +41,6 @@ export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
         onOpenAddContentModal={onOpenAddContentModal}
         readOnly={readOnly}
       />
-    </div>
+    </ScrollArea>
   );
 };
diff --git a/web/src/styles/buster.scss b/web/src/styles/buster.scss
index 5f71a4aad..5673bfca5 100644
--- a/web/src/styles/buster.scss
+++ b/web/src/styles/buster.scss
@@ -6,8 +6,7 @@
   }
 }
 
-.scroll-shadow-container {
-  @apply relative overflow-y-auto;
+#scroll-area-viewport {
   scroll-timeline-name: --scrollShadowContainer;
 
   .scroll-header {