Merge pull request #36 from crow-fox/bugFix/top-page-layout

colorGridTableを操作したときにfooterがtableに重なるなどのレイアウト崩れを修正
crow-fox · May 6, 2024 · 42d9390 · 42d9390
2 parents 0b92fbb + f952b1f
commit 42d9390
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,8 +20,8 @@ export default function RootLayout({
     <html lang="ja" suppressHydrationWarning>
       <body>
         <ThemeProvider>
-          <div className="grid min-h-svh grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] grid-rows-[auto_1fr_auto] bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
-            <header className=" grid grid-cols-subgrid border-b border-gray-200 p-4 [grid-column:1/-1] dark:border-gray-700">
+          <div className=" flex min-h-svh flex-col bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
+            <header className=" grid grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] border-b border-gray-200 p-4  dark:border-gray-700">
               <nav className=" grid [grid-column:2]">
                 <ul className=" flex flex-wrap items-center gap-4">
                   <li className=" mr-auto">
@@ -43,10 +43,10 @@ export default function RootLayout({
                 </ul>
               </nav>
             </header>
-            <main className="grid grid-cols-subgrid py-8 [grid-column:1/-1] ">
+            <main className="grid grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] py-8 ">
               <div className=" [grid-column:2]">{children}</div>
             </main>
-            <footer className="grid grid-cols-subgrid py-4 [grid-column:1/-1]">
+            <footer className="mt-auto grid grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] py-4">
               <p className="grid justify-center [grid-column:2]">
                 <a href="https://github.com/crow-fox">
                   <small className="text-sm">&copy; crow-fox</small>