From afcdd6efa44fcc5902dd61570523fe738411088c 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: Sun, 14 Aug 2022 18:39:59 +0900
Subject: [PATCH] fix padding with `safe-area-inset-bottom`

---
 packages/client/src/components/emoji-picker.vue        | 4 ++++
 packages/client/src/components/launch-pad.vue          | 2 +-
 packages/client/src/components/ui/menu.vue             | 2 +-
 packages/client/src/pages/messaging/messaging-room.vue | 1 -
 packages/client/src/ui/universal.vue                   | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 4a46e0ecfb48..88862f2d66c4 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -433,6 +433,10 @@ defineExpose({
 				}
 			}
 		}
+
+		> .search:not(:focus):not(.filled) {
+			margin-bottom: env(safe-area-inset-bottom);
+		}
 	}
 
 	> .search {
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 7891f61bf10a..8a5973c04b29 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.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/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 60b68954d649..1b971ea2bdf9 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -335,7 +335,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.asDrawer {
-		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+		padding: 12px 0 max(env(safe-area-inset-bottom, 0), 12px) 0;
 		width: 100%;
 		border-radius: 24px;
 		border-bottom-right-radius: 0;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index fe1590b2408e..4d89a90d3f29 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -336,7 +336,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/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 0ef0da70b5dd..7595e04b6979 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -288,7 +288,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		z-index: 1000;
 		bottom: 0;
 		left: 0;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;