fix: center the div

lewxdev · Jul 22, 2024 · ec38fa4 · ec38fa4
1 parent c71b16a
commit ec38fa4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/app/components/field.tsx b/app/components/field.tsx
@@ -22,7 +22,7 @@ export function Field() {
 
   return (
     <div
-      className="grid select-none bg-white"
+      className="grid max-h-full max-w-full select-none overflow-auto bg-white"
       onContextMenu={(event) => event.preventDefault()}
       style={{
         gap: `${GRID_SIZE * 0.125}rem`,

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,7 +9,11 @@ export const metadata: Metadata = {
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {
   return (
     <html lang="en">
-      <body className={GeistSans.className}>{props.children}</body>
+      <body className={GeistSans.className}>
+        <div className="flex h-screen items-center justify-center">
+          {props.children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,5 @@
 import { Field } from "@/components/field";
 
 export default function App() {
-  return (
-    <div className="flex h-screen items-center justify-center">
-      <Field />
-    </div>
-  );
+  return <Field />;
 }