From 1453a0f5cfa3ec7d0b974b56a9b9470693df0c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=81=9A=E3=81=8D=E2=AA=A5=E2=84=A2?=
 <44765629+melt-adzuki@users.noreply.github.com>
Date: Tue, 10 Jan 2023 13:50:34 +0900
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E4=B8=8B=E9=83=A8=E3=81=AB?=
 =?UTF-8?q?=E5=BF=85=E8=A6=81=E3=81=AA=E3=82=B9=E3=83=9A=E3=83=BC=E3=82=B9?=
 =?UTF-8?q?=E9=96=A2=E9=80=A3=E3=81=AE=E6=94=B9=E5=96=84=20(#9509)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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`
---
 packages/frontend/src/components/MkLaunchPad.vue      |  2 +-
 packages/frontend/src/components/MkMenu.vue           |  2 +-
 .../frontend/src/pages/messaging/messaging-room.vue   |  1 -
 packages/frontend/src/style.scss                      |  4 +++-
 packages/frontend/src/ui/_common_/common.vue          | 11 +++--------
 .../frontend/src/ui/_common_/stream-indicator.vue     |  4 ++--
 packages/frontend/src/ui/universal.vue                |  8 +-------
 7 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index aab7631e3..2f941a311 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 a1020ef15..94dabcac9 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 84dcfc362..01b227a67 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 3cd760242..22c297dc3 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 0333e20d0..d1f37d398 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 a855de8ab..9a67c15cb 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 3d74fc9ee..fcc0b468e 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>