画面下部に必要なスペース関連の改善 (#9509)

* enhance: apply same safe area processing to the tab bar

* fix: remove unnecessary bottom space on messaging room

* enhance bottom spacing

* fix size of `minBottomSpacing`

7 files changed, 11 insertions, 21 deletions

diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index aab7631e36..2f941a311d 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -75,7 +75,7 @@ function close() {
 
 	&.asDrawer {
 		width: 100%;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index a1020ef151..94dabcac90 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.asDrawer {
-		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 		width: 100%;
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index 84dcfc3622..01b227a672 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -351,7 +351,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		z-index: 2;
 		bottom: 0;
 		padding-top: 8px;
-		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
 
 		> .new-message {
 			width: 100%;
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 3cd7602423..22c297dc31 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -6,9 +6,11 @@
 	--marginHalf: 10px;
 
 	--margin: var(--marginFull);
-
+	--minBottomSpacing: 0px;
+	
 	@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/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 0333e20d0a..d1f37d398f 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -98,10 +98,10 @@ if ($i) {
 		}
 	}
 
-	@media (max-width: 700px) {
+	@media (max-width: 500px) {
 		top: initial;
-		bottom: 112px;
-		padding: 0 16px;
+		bottom: calc(var(--minBottomSpacing) + var(--margin));
+		padding: 0 var(--margin);
 		display: flex;
 		flex-direction: column-reverse;
 
@@ -112,11 +112,6 @@ if ($i) {
 			}
 		}
 	}
-
-	@media (max-width: 500px) {
-		bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
-		padding: 0 8px;
-	}
 }
 </style>
 
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index a855de8ab9..9a67c15cb5 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -38,8 +38,8 @@ onUnmounted(() => {
 .nsbbhtug {
 	position: fixed;
 	z-index: 16385;
-	bottom: 8px;
-	right: 8px;
+	bottom: calc(var(--minBottomSpacing) + var(--margin));
+	right: var(--margin);
 	margin: 0;
 	padding: 6px 12px;
 	font-size: 0.9em;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 3d74fc9ee3..fcc0b468e3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -392,12 +392,6 @@ $widgets-hide-threshold: 1090px;
 }
 
 .spacer {
-	$widgets-hide-threshold: 1090px;
-
-	height: calc(env(safe-area-inset-bottom, 0px) + 96px);
-
-	@media (min-width: ($widgets-hide-threshold + 1px)) {
-		display: none;
-	}
+	height: calc(var(--minBottomSpacing));
 }
 </style>