added scroll ability

apps/web-tss/src/components/ui/layouts/AppPageLayout.tsx

@@ -50,7 +50,6 @@ export const AppPageLayout: React.FC<
         <AppPageLayoutHeader
           className={cn(headerBorderVariant === 'ghost' && '-mt-[0.5px]', headerClassName)}
           sizeVariant={headerSizeVariant}
-          borderVariant={headerBorderVariant}
         >
           {header}
         </AppPageLayoutHeader>
@@ -60,7 +59,6 @@ export const AppPageLayout: React.FC<
         <AppPageLayoutHeader
           className={cn(headerBorderVariant === 'ghost' && '-mt-[0.5px]', headerClassName)}
           sizeVariant={headerSizeVariant}
-          borderVariant={headerBorderVariant}
         >
           {secondaryHeader}
         </AppPageLayoutHeader>
@@ -71,9 +69,12 @@ export const AppPageLayout: React.FC<
         scrollable={scrollable}
         id={contentContainerId}
       >
-        {header && scrollable && headerBorderVariant === 'ghost' && (
-          <div className="scroll-header" />
-        )}
+        <div
+          className={cn(
+            'pointer-events-none top-[0px] z-10 right-0 left-0 h-[0.5px] w-full sticky bg-border',
+            headerBorderVariant === 'ghost' && 'scroll-header'
+          )}
+        />
 
         {children}
       </AppPageLayoutContent>

apps/web-tss/src/components/ui/layouts/AppPageLayoutHeader.tsx

@@ -10,22 +10,10 @@ const headerVariants = cva(
         default: 'px-4.5',
         list: 'px-7.5',
       },
-      borderVariant: {
-        default: 'border-b',
-        ghost: 'border-b-0',
-      },
     },
     defaultVariants: {
-      borderVariant: 'default',
       sizeVariant: 'default',
     },
-    compoundVariants: [
-      {
-        borderVariant: 'ghost',
-        sizeVariant: 'default',
-        className: 'max-h-[37.5px] min-h-[37.5px]', // hack. figure out a better way to do this
-      },
-    ],
   }
 );
 
@@ -35,8 +23,6 @@ export const AppPageLayoutHeader: React.FC<
       className?: string;
     } & VariantProps<typeof headerVariants>
   >
-> = ({ children, className = '', sizeVariant = 'default', borderVariant = 'default' }) => {
-  return (
-    <div className={cn(headerVariants({ sizeVariant, borderVariant }), className)}>{children}</div>
-  );
+> = ({ children, className = '', sizeVariant = 'default' }) => {
+  return <div className={cn(headerVariants({ sizeVariant }), className)}>{children}</div>;
 };

apps/web-tss/src/layouts/AssetContainer/AssetContainer.tsx

@@ -1,7 +1,20 @@
 import type React from 'react';
 
+import { AppPageLayout } from '@/components/ui/layouts/AppPageLayout';
+import { AppPageLayoutHeader } from '@/components/ui/layouts/AppPageLayoutHeader';
+
 export const AssetContainer: React.FC<{
   children: React.ReactNode;
-}> = ({ children }) => {
-  return <div className="bg-red-100 h-full w-full">{children}</div>;
+  header?: React.ReactNode;
+}> = ({ children, header }) => {
+  return (
+    <AppPageLayout
+      header={header}
+      headerBorderVariant="ghost"
+      headerSizeVariant="default"
+      scrollable={false}
+    >
+      <div className="h-full flex flex-col w-full">{children}</div>
+    </AppPageLayout>
+  );
 };

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx

@@ -5,9 +5,5 @@ export const MetricAssetContainer: React.FC<{
   metricId: string;
   metric_version_number: number | undefined;
 }> = ({ children, metricId, metric_version_number }) => {
-  return (
-    <AssetContainer>
-      METRIC {children} {metricId} {metric_version_number}
-    </AssetContainer>
-  );
+  return <AssetContainer header={<div>Metric ID: {metricId}</div>}>{children}</AssetContainer>;
 };

apps/web-tss/src/styles/buster.scss

@@ -10,21 +10,12 @@
   scroll-timeline-name: --scrollShadowContainer;
 
   .scroll-header {
-    @apply pointer-events-none absolute top-[0px] right-0 left-0 h-[0.5px] w-full border-b border-transparent;
-    animation: shadowAnimation linear;
-    animation-range: 0px 120px;
+    @apply pointer-events-none top-[0px] z-10 right-0 left-0 h-[0.5px] w-full sticky;
+    animation-name: scrollShowAnimation;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
     animation-timeline: --scrollShadowContainer;
+    animation-range: 0px 140px;
     animation-fill-mode: forwards;
-    z-index: 1;
-  }
-
-  @keyframes shadowAnimation {
-    from {
-      border-color: transparent;
-    }
-    to {
-      border-color: var(--color-border);
-    }
   }
 }
 
@@ -49,3 +40,14 @@
   scrollbar-color: color-mix(in srgb, var(--color-border) 50%, transparent)
     transparent;
 }
+
+@keyframes scrollShowAnimation {
+  from {
+    background-color: transparent;
+    min-height: 0px;
+  }
+  to {
+    background-color: var(--color-border);
+    min-height: 0.5px;
+  }
+}