From 075ca1d303c332cabcae34ec09f011faedb8e1cd Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Mon, 15 Apr 2024 14:02:09 +0200
Subject: [PATCH] fixed demo header scroll and card frame padding

---
 apps/demo/src/app/layout.tsx                 |  8 ++--
 apps/demo/src/components/header.tsx          | 46 +++++++++++---------
 packages/stack/src/components/card-frame.tsx |  6 +--
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/apps/demo/src/app/layout.tsx b/apps/demo/src/app/layout.tsx
index 2e6ef3fb0..7ab0d1807 100644
--- a/apps/demo/src/app/layout.tsx
+++ b/apps/demo/src/app/layout.tsx
@@ -24,9 +24,11 @@ export default function RootLayout({
           app={stackServerApp}
         >
           <Provider>
-            <Header />
-            <div className="fixed top-12 left-0 right-0 bottom-0 overflow-auto">
-              {children}
+            <div className="flex flex-col h-screen">
+              <Header />
+              <div className="flex-grow">
+                {children}
+              </div>
             </div>
           </Provider>
         </StackProvider>
diff --git a/apps/demo/src/components/header.tsx b/apps/demo/src/components/header.tsx
index cb1236aa0..3eb64fd74 100644
--- a/apps/demo/src/components/header.tsx
+++ b/apps/demo/src/components/header.tsx
@@ -10,28 +10,32 @@ export default function Header() {
   const { colors, colorMode } = useDesign();
   const [currentUI, setCurrentUI] = useCurrentUI();
   return (
-    <div 
-      className={"fixed w-full top-0 z-50 p-4 h-12 flex items-center py-4 border-b justify-between"}
-      style={{
-        borderColor: colors.neutralColor
-      }}
-    >
-      <Link href="/" className="font-semibold">
-      Stack Demo
-      </Link>
+    <>
+      <div 
+        className={"fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between"}
+        style={{
+          borderColor: colors.neutralColor,
+          backgroundColor: colors.backgroundColor,
+        }}
+      >
+        <Link href="/" className="font-semibold">
+          Stack Demo
+        </Link>
 
-      <div className="flex items-center justify-end gap-5">
-        <Select 
-          options={[
-            { value: 'default', label: 'Default UI' },
-            { value: 'joy', label: 'Joy UI' }
-          ]}
-          value={currentUI}
-          onChange={(e) => setCurrentUI(e.target.value as any)}
-        />
-        <ColorMode />
-        <UserButton />
+        <div className="flex items-center justify-end gap-5">
+          <Select 
+            options={[
+              { value: 'default', label: 'Default UI' },
+              { value: 'joy', label: 'Joy UI' }
+            ]}
+            value={currentUI}
+            onChange={(e) => setCurrentUI(e.target.value as any)}
+          />
+          <ColorMode />
+          <UserButton />
+        </div>
       </div>
-    </div>
+      <div className="min-h-12"/> {/* Placeholder for fixed header */}
+    </>
   );
 }
\ No newline at end of file
diff --git a/packages/stack/src/components/card-frame.tsx b/packages/stack/src/components/card-frame.tsx
index 2c8e623e7..1ddef5d22 100644
--- a/packages/stack/src/components/card-frame.tsx
+++ b/packages/stack/src/components/card-frame.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Card, Container } from "../components-core";
+import { Container } from "../components-core";
 import React, { useEffect, useState } from "react";
 
 export default function CardFrame({ 
@@ -28,10 +28,10 @@ export default function CardFrame({
           height: hasNoParent ? '100vh' : '100%',
           display: 'flex', 
           alignItems: 'center', 
-          justifyContent: 'center' 
+          justifyContent: 'center',
         }}
       >
-        <Container size={350}>
+        <Container size={380} style={{ padding: '1rem 1rem' }}>
           {children}
         </Container>
       </div>