From ca8f28c1fda3f32c0957213431a87a1b591677cc Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Fri, 21 Mar 2025 15:56:36 +1000
Subject: [PATCH] [frontend/components] Improve mobile emoji picker and menu
 positioning and padding

---
 Iceshrimp.Frontend/Components/EmojiPicker.razor.css | 3 ++-
 Iceshrimp.Frontend/Components/Menu.razor.css        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
index e1b37711..568e954a 100644
--- a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
+++ b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
@@ -42,7 +42,8 @@ summary {
     .emoji-picker {
         top: unset;
         left: 0;
-        bottom: 0;
+        /*Display emoji picker above keyboard (currently only on Chrome)*/
+        bottom: env(keyboard-inset-height, 0);
         position: fixed;
         width: 100vw;
         max-width: 100vw;
diff --git a/Iceshrimp.Frontend/Components/Menu.razor.css b/Iceshrimp.Frontend/Components/Menu.razor.css
index f6d1eb29..c4ea968f 100644
--- a/Iceshrimp.Frontend/Components/Menu.razor.css
+++ b/Iceshrimp.Frontend/Components/Menu.razor.css
@@ -40,6 +40,6 @@
         border-right: none;
         border-radius: 0;
         z-index: +26;
-        padding-bottom: env(safe-area-inset-bottom);
+        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
     }
 }
\ No newline at end of file