From 2b7575e7104f3636f737a3b0b454c970af04952a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Tue, 25 Jul 2023 03:30:50 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=AE=E3=81=A8=E3=81=8D=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E4=B8=8B=E9=83=A8=E3=81=8C=E3=83=8A=E3=83=93=E3=82=B2?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AB?=
 =?UTF-8?q?=E9=9A=A0=E3=82=8C=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=20(#110)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: insert bottom spacing appropriately

* Revert CHANGELOG.md

---------

Co-authored-by: ibuki2003 <main@fuwa.dev>
---
 packages/frontend/src/style.scss       | 6 ++++--
 packages/frontend/src/ui/universal.vue | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

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,