From e38871879cea6b1cd26aa458a656181b5fed04f1 Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Fri, 6 Mar 2026 18:48:13 -0600
Subject: [PATCH] feat(layout): add full-height flex layout and FullWidth
 component

---
 panda.config.ts                     |  3 +++
 src/components/layout/FullWidth.tsx | 13 +++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 src/components/layout/FullWidth.tsx

diff --git a/panda.config.ts b/panda.config.ts
index 7340ff9..cd53a86 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -20,6 +20,9 @@ export default defineConfig({
 
   globalCss: {
     body: {
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100vh',
       backgroundColor: 'neutral.1',
       color: 'neutral.12',
       fontFamily: "'Roboto Variable', sans-serif",
diff --git a/src/components/layout/FullWidth.tsx b/src/components/layout/FullWidth.tsx
new file mode 100644
index 0000000..312dc4c
--- /dev/null
+++ b/src/components/layout/FullWidth.tsx
@@ -0,0 +1,13 @@
+import { css, cx } from '@styled-system/css'
+import type { FC, ReactNode } from 'react'
+
+export interface FullWidthProps {
+  className?: string
+  children?: ReactNode
+}
+
+const FullWidth: FC<FullWidthProps> = ({ className, children }) => {
+  return <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
+}
+
+export default FullWidth