scrolling variant

web/src/components/ui/layouts/AppPageLayout.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { AppPageLayout } from './AppPageLayout';
+import React from 'react';
 
 const meta: Meta<typeof AppPageLayout> = {
   title: 'UI/Layouts/AppPageLayout',
@@ -53,6 +54,7 @@ export const LongContent: Story = {
   args: {
     header: <div className="bg-gray-100">Header Content</div>,
     scrollable: true,
+    headerBorderVariant: 'ghost',
     children: (
       <>
         {Array.from({ length: 100 }, (_, i) => (

web/src/components/ui/layouts/AppPageLayout.tsx

@@ -39,7 +39,14 @@ export const AppPageLayout: React.FC<
           {header}
         </AppPageLayoutHeader>
       )}
-      <AppPageLayoutContent scrollable={scrollable}>{children}</AppPageLayoutContent>
+
+      <AppPageLayoutContent className="scroll-shadow-container" scrollable={scrollable}>
+        {header && scrollable && headerBorderVariant === 'ghost' && (
+          <div className="scroll-header"></div>
+        )}
+
+        {children}
+      </AppPageLayoutContent>
     </div>
   );
 };

web/src/components/ui/layouts/AppPageLayoutHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const headerVariants = cva(
-  'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 ',
+  'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 relative z-10',
   {
     variants: {
       sizeVariant: {

web/src/styles/buster.scss

@@ -5,3 +5,31 @@
     display: none;
   }
 }
+
+// This approach has very limited browser support
+:root {
+  --globalScrollTimeline: none; // Define the timeline globally
+}
+
+.scroll-shadow-container {
+  position: relative;
+  scroll-timeline-name: --globalScrollTimeline;
+  @apply relative;
+
+  .scroll-header {
+    @apply fixed top-[30px] right-0 left-0 h-2 w-full;
+    animation: shadowAnimation linear;
+    animation-range: 0px 125px;
+    animation-timeline: --globalScrollTimeline;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes shadowAnimation {
+    from {
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+      box-shadow: 0px 1px 8px 0px #00000029;
+    }
+  }
+}