From 51fe11281260b4971ea31103c527227cd02722a5 Mon Sep 17 00:00:00 2001
From: Hwang Taehwan <107744534+stakbucks@users.noreply.github.com>
Date: Thu, 26 Sep 2024 22:44:22 +0900
Subject: [PATCH] fix(bottle): handle scrollable area height (#61)

---
 apps/bottle/src/app/profile/edit/profileEditStyle.css.ts        | 2 +-
 .../src/components/profile/layout/profileLayoutStyle.css.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/bottle/src/app/profile/edit/profileEditStyle.css.ts b/apps/bottle/src/app/profile/edit/profileEditStyle.css.ts
index 29b55e8..ed44925 100644
--- a/apps/bottle/src/app/profile/edit/profileEditStyle.css.ts
+++ b/apps/bottle/src/app/profile/edit/profileEditStyle.css.ts
@@ -4,7 +4,7 @@ import { style } from '@vanilla-extract/css';
 
 export const contentsContainerStyle = style({
   width: '100%',
-  height: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  height: `calc(100vh - ${HEADER_HEIGHT}px + env(safe-area-inset-top))`,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
diff --git a/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts b/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts
index 71aedd7..330f139 100644
--- a/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts
+++ b/apps/bottle/src/components/profile/layout/profileLayoutStyle.css.ts
@@ -21,7 +21,7 @@ export const buttonContainer = style({
 });
 
 export const containerStyle = style({
-  height: `calc(100vh - ${CONTAINER_OFFSET_HEIGHT - OVERLAP_HEIGHT}px)`,
+  height: `calc(100vh - ${CONTAINER_OFFSET_HEIGHT - OVERLAP_HEIGHT}px + env(safe-area-inset-top))`,
   overflow: 'scroll',
   msOverflowStyle: 'none',
   scrollbarWidth: 'none',