hack: safe area に対応 (#691)

nakaterm · web-flow · commit 2c9da39f23b2 · 2025-04-12T04:45:49.000+09:00
diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <ModalProvider>
         <Header title="チャット" />
         <NavigateByAuthState type="toLoginForUnauthenticated">
-          <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+          <div className="cm-pb-footer h-full overflow-y-auto pt-12">
+            {children}
+          </div>
         </NavigateByAuthState>
         <BottomBar activeTab="3_chat" />
       </ModalProvider>
diff --git a/web/app/friends/layout.tsx b/web/app/friends/layout.tsx
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <ModalProvider>
         <Header title="フレンド" />
         <NavigateByAuthState type="toLoginForUnauthenticated">
-          <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+          <div className="cm-pb-footer h-full overflow-y-auto pt-12">
+            {children}
+          </div>
         </NavigateByAuthState>
         <BottomBar activeTab="1_friends" />
       </ModalProvider>
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -11,3 +11,8 @@
 .cm-li-btn {
   @apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-6 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;
 }
+
+/* Bottom Bar の分の幅 */
+.cm-pb-footer {
+  padding-bottom: calc(3rem + env(safe-area-inset-bottom));
+}
diff --git a/web/app/home/layout.tsx b/web/app/home/layout.tsx
@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full pt-12 pb-12">{children}</div>
+        <div className="cm-pb-footer h-full pt-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="0_home" />
     </>
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -33,10 +33,11 @@ export default function RootLayout({
       <head>
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
-        <meta
+        {/* TODO: 上書きされる*/}
+        {/* <meta
           name="viewport"
           content="width=device-width, initial-scale=1, viewport-fit=cover"
-        />
+        /> */}
         <title>CourseMate</title>
       </head>
       <body className="h-full">
diff --git a/web/app/search/layout.tsx b/web/app/search/layout.tsx
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <ModalProvider>
         <Header title="検索" />
         <NavigateByAuthState type="toLoginForUnauthenticated">
-          <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+          <div className="cm-pb-footer h-full overflow-y-auto pt-12">
+            {children}
+          </div>
         </NavigateByAuthState>
         <BottomBar activeTab="2_search" />
       </ModalProvider>
diff --git a/web/app/settings/layout.tsx b/web/app/settings/layout.tsx
@@ -11,7 +11,9 @@ export default function Layout({
     <>
       <Header title="設定" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+        <div className="cm-pb-footer h-full overflow-y-auto pt-12">
+          {children}
+        </div>
       </NavigateByAuthState>
       <BottomBar activeTab="4_settings" />
     </>
diff --git a/web/package.json b/web/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "next dev -p 5173",
     "build": "next build",
+    "postbuild": "find ./out -type f \\( -name \"*.html\" -o -name \"*.txt\" \\) -exec sed -E -i '' 's/(width=device-width, initial-scale=1)([^,])/\\1, viewport-fit=cover\\2/g' {} +",
     "preview": "next start"
   },
   "dependencies": {

Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,8 @@`
`11`	`11`	`.cm-li-btn {`
`12`	`12`	`@apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-6 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+/* Bottom Bar の分の幅 */`
	`16`	`+.cm-pb-footer {`
	`17`	`+ padding-bottom: calc(3rem + env(safe-area-inset-bottom));`
	`18`	`+}`