Merge pull request #17 from cloudmix-dev/bugfix/app-shell-layout

Fix AppShell component layout
cloudmix-dev · Dec 30, 2023 · 9020bb5 · 9020bb5
2 parents 51c2a3d + e3691b2
commit 9020bb5
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 9 deletions.
diff --git a/.changeset/healthy-ties-swim.md b/.changeset/healthy-ties-swim.md
@@ -0,0 +1,5 @@
+---
+"@cloudmix-dev/react": patch
+---
+
+Fix AppShell component layout
diff --git a/packages/react/src/components/app-shell.tsx b/packages/react/src/components/app-shell.tsx
@@ -112,8 +112,8 @@ function AppShell({
           </div>
         </div>
       )}
-      <div className={cn(renderNav && "lg:pl-72")}>
-        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-neutral-200 bg-neutral-50 text-neutral-950 px-4 dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800">
+      <div className={cn("relative h-full max-h-full", hasNav && "lg:ml-72")}>
+        <div className="absolute top-0 left-0 w-full z-40 flex h-16 items-center gap-x-4 border-b border-neutral-200 bg-neutral-50 text-neutral-950 px-4 dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800">
           {hasNav && (
             <button
               type="button"
@@ -137,8 +137,10 @@ function AppShell({
             </div>
           )}
         </div>
-        <main className="py-10">
-          <div className="px-4 sm:px-6 lg:px-8">{children}</div>
+        <main className="h-full max-h-full pt-16 overflow-hidden">
+          <div className="h-full max-h-full p-4 overflow-scroll">
+            {children}
+          </div>
         </main>
       </div>
     </div>

diff --git a/www/storybook/src/stories/app-shell.stories.tsx b/www/storybook/src/stories/app-shell.stories.tsx
@@ -2,13 +2,91 @@ import {
   AppShell,
   Avatar,
   Logo,
+  Prose,
   TextField,
   ThemeSelector,
 } from "@cloudmix-dev/react";
 import { type Meta, type StoryObj } from "@storybook/react";
 
 import { StoryLayout } from "../components/layout";
 
+function Content() {
+  return (
+    <Prose className="m-auto">
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
+        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
+        erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
+        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
+        sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
+        facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
+        neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
+        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+        luctus, metus
+      </p>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
+        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
+        erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
+        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
+        sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
+        facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
+        neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
+        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+        luctus, metus
+      </p>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
+        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
+        erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
+        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
+        sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
+        facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
+        neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
+        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+        luctus, metus
+      </p>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
+        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
+        erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
+        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
+        sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
+        facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
+        neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
+        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+        luctus, metus
+      </p>
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
+        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
+        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
+        leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
+        erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
+        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
+        sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
+        facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
+        neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
+        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+        luctus, metus
+      </p>
+    </Prose>
+  );
+}
+
 const meta: Meta<typeof AppShell> = {
   title: "Components/AppShell",
   component: AppShell,
@@ -70,7 +148,9 @@ export const Default: AppShellStory = {
             <ThemeSelector />
           </>
         }
-      />
+      >
+        <Content />
+      </AppShell>
     </div>
   ),
   args: {},
@@ -99,7 +179,9 @@ export const WithNavLinks: AppShellStory = {
             </AppShell.NavigationLink>
           </>
         }
-      />
+      >
+        <Content />
+      </AppShell>
     </div>
   ),
   args: {},
@@ -125,7 +207,9 @@ export const WithNavFooter: AppShellStory = {
             </AppShell.NavigationLink>
           </>
         }
-      />
+      >
+        <Content />
+      </AppShell>
     </div>
   ),
   args: {},
@@ -137,7 +221,9 @@ export const WithBar: AppShellStory = {
       <AppShell
         {...props}
         renderBar={<TextField className="w-full" placeholder="Search..." />}
-      />
+      >
+        <Content />
+      </AppShell>
     </div>
   ),
   args: {},
@@ -158,7 +244,9 @@ export const WithActions: AppShellStory = {
             <ThemeSelector />
           </>
         }
-      />
+      >
+        <Content />
+      </AppShell>
     </div>
   ),
   args: {},