From 545b5cab9618753667b0d53320ced0928a941d5e Mon Sep 17 00:00:00 2001
From: Ibuki Sugiyama <main@fuwa.dev>
Date: Tue, 25 Jul 2023 19:49:52 +0900
Subject: [PATCH] fix: insert bottom spacing appropriately (#11370)

---
 CHANGELOG.md                           | 1 +
 packages/frontend/src/style.scss       | 6 ++++--
 packages/frontend/src/ui/universal.vue | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 744846d99..1b654699d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 ### Client
 - リストTLで、ユーザーが追加・削除されてもTLを初期化しないように
+- Fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正
 
 ### Server
 - Fix: APIのオフセットが壊れていたせいで「もっと見る」でもっと見れない問題を修正
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index bd74db7c8..85ad442ba 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -6,11 +6,13 @@
 	--marginHalf: 10px;
 
 	--margin: var(--marginFull);
-	--minBottomSpacing: 0px;
+
+	// switch dynamically
+	--minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
+	--minBottomSpacing: var(--minBottomSpacingMobile);
 
 	@media (max-width: 500px) {
 		--margin: var(--marginHalf);
-		--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
 	}
 
 	//--ad: rgb(255 169 0 / 10%);
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 9ae43c39d..50866b23e 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -207,9 +207,11 @@ watch($$(navFooter), () => {
 	if (navFooter) {
 		navFooterHeight = navFooter.offsetHeight;
 		document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`);
+		document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
 	} else {
 		navFooterHeight = 0;
 		document.body.style.setProperty('--stickyBottom', '0px');
+		document.body.style.setProperty('--minBottomSpacing', '0px');
 	}
 }, {
 	immediate: true,