From 685cb7d0b9e019fa03483502f0ed8f4466a2ef1f Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Thu, 6 Feb 2025 22:11:19 +1000
Subject: [PATCH] [frontend/components] Add mobile styling to menu and emoji
 picker

---
 .../Components/EmojiPicker.razor.css              | 15 ++++++++++++++-
 Iceshrimp.Frontend/Components/Menu.razor.css      | 15 +++++++++++++++
 .../Components/MenuElement.razor.css              |  6 ++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
index cb3c11f7..c8d8a9d3 100644
--- a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
+++ b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
@@ -38,7 +38,20 @@ summary {
     padding: 0;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 1000px) {
+    .emoji-picker {
+        top: unset;
+        left: 0;
+        bottom: 0;
+        position: fixed;
+        width: 100vw;
+        max-width: 100vw;
+        max-height: 30rem;
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
     .emoji-list {
         gap: 0.2rem;
         margin: 0.5rem 0;
diff --git a/Iceshrimp.Frontend/Components/Menu.razor.css b/Iceshrimp.Frontend/Components/Menu.razor.css
index fb870ab8..6d50b509 100644
--- a/Iceshrimp.Frontend/Components/Menu.razor.css
+++ b/Iceshrimp.Frontend/Components/Menu.razor.css
@@ -11,4 +11,19 @@
     top: var(--top);
     left: calc(var(--left) - 7.5rem);
     z-index: +2;
+}
+
+@media (max-width: 1000px) {
+    .menu {
+        top: unset;
+        bottom: 0;
+        left: 0;
+        position: fixed;
+        width: 100vw;
+        max-width: 100vw;
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        z-index: +26;
+    }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/MenuElement.razor.css b/Iceshrimp.Frontend/Components/MenuElement.razor.css
index c2c621d4..0610ce9f 100644
--- a/Iceshrimp.Frontend/Components/MenuElement.razor.css
+++ b/Iceshrimp.Frontend/Components/MenuElement.razor.css
@@ -14,3 +14,9 @@
 .menu-element:hover {
     background-color: var(--hover-color);
 }
+
+@media (max-width: 1000px) {
+    .menu-element + .menu-element {
+        margin-top: 1rem;
+    }
+}