From 4d07687b59ce235ce8449fddd190d3ea7622bd73 Mon Sep 17 00:00:00 2001
From: naka-12 <104970808+naka-12@users.noreply.github.com>
Date: Sat, 12 Apr 2025 04:43:53 +0900
Subject: [PATCH 1/2] Revert "experiemntal: safe area (#690)"

This reverts commit 8eda77fa978e9961a1f73be032b77664f08cda8d.
---
 web/app/layout.tsx           | 2 +-
 web/components/BottomBar.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 01aa0a16..f6ceb29d 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1, viewport-fit=cover"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
         />
         <title>CourseMate</title>
       </head>
diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index e1694695..14ab9ade 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -37,9 +37,8 @@ export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
     <div
-      className="fixed bottom-0 z-30 flex w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
+      className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
       style={{
-        height: "calc(3rem + env(safe-area-inset-bottom))",
         paddingBottom: "env(safe-area-inset-bottom)",
       }}
     >

From 1d3ad2c5c997b155a2c38d4271570acae16e6954 Mon Sep 17 00:00:00 2001
From: naka-12 <104970808+naka-12@users.noreply.github.com>
Date: Sat, 12 Apr 2025 04:40:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?hack:=20=E7=84=A1=E7=90=86=E7=9F=A2?=
 =?UTF-8?q?=E7=90=86=20viewport-fit=20=E3=82=92=E8=A8=AD=E5=AE=9A=E3=83=BB?=
 =?UTF-8?q?=E3=83=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/chat/layout.tsx      | 4 +++-
 web/app/friends/layout.tsx   | 4 +++-
 web/app/globals.css          | 5 +++++
 web/app/home/layout.tsx      | 2 +-
 web/app/layout.tsx           | 7 ++++---
 web/app/search/layout.tsx    | 4 +++-
 web/app/settings/layout.tsx  | 4 +++-
 web/components/BottomBar.tsx | 3 ++-
 web/package.json             | 1 +
 9 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx
index fabe653b..31bd4e2b 100644
--- 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
index 0146483c..721d92db 100644
--- 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
index fe4c7bb8..d0c12603 100644
--- 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
index ec50a110..cfb28d1f 100644
--- 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
index f6ceb29d..4630892a 100644
--- 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.0, maximum-scale=1.0"
-        />
+          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
index 87bbc6a3..8f275579 100644
--- 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
index 0dfbe9fc..f3d9fa7a 100644
--- 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/components/BottomBar.tsx b/web/components/BottomBar.tsx
index 14ab9ade..e1694695 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -37,8 +37,9 @@ export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
     <div
-      className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
+      className="fixed bottom-0 z-30 flex w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
       style={{
+        height: "calc(3rem + env(safe-area-inset-bottom))",
         paddingBottom: "env(safe-area-inset-bottom)",
       }}
     >
diff --git a/web/package.json b/web/package.json
index ecaa4c00..0b8c3242 100644
--- 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": {