From 5839b24f3bd7e827e0f80897f38257646e3fa381 Mon Sep 17 00:00:00 2001
From: naka-12 <104970808+naka-12@users.noreply.github.com>
Date: Sat, 12 Apr 2025 02:07:47 +0900
Subject: [PATCH] experiemntal: safe area

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

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index f6ceb29d..01aa0a16 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.0, maximum-scale=1.0"
+          content="width=device-width, initial-scale=1, viewport-fit=cover"
         />
         <title>CourseMate</title>
       </head>
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)",
       }}
     >