✨ feat : 🛠 fix : 💄 style : body min-height 동적으로 설정!!

dnd-side-project · Apr 17, 2024 · 8766841 · 8766841
1 parent 59ff6d5
commit 8766841
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,6 +11,17 @@
   display: none;
 }
 
+body {
+  min-height: 100vh;
+}
+
+@supports (-webkit-touch-callout: none) {
+  body {
+    /* for ios safari 15, safe-area-inset-bottom is 0, so a special fix apply here */
+    min-height: -webkit-fill-available;
+  }
+}
+
 @media (min-width: 440px) {
   html {
     font-size: 16px;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -49,7 +49,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <body className="flex min-h-screen w-screen touch-none justify-center bg-slate-100 py-px">
+      <body className="flex w-screen touch-none justify-center bg-slate-100">
         <div className="w-full max-w-440 overflow-scroll bg-white text-primary">
           <Suspense>
             <Analytics />