[frontend/components] Add mobile styling to menu and emoji picker

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;

Iceshrimp.Frontend/Components/Menu.razor.css

@@ -12,3 +12,18 @@
     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;
+    }
+}

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;
+    }
+}