[frontend/pages] Make emoji management layout flex

Iceshrimp.Frontend/Components/EmojiManagementEntry.razor.css

@@ -3,6 +3,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem;
+    width: 25rem;
     background-color: var(--foreground-color);
     border-radius: 0.5rem;
     cursor: pointer;
@@ -38,4 +39,10 @@
         line-height: 1;
         color: var(--notice-color);
     }
+}
+
+@media (max-width: 1000px) {
+    .emoji-entry {
+        width: 100%;
+    }
 }

Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css

@@ -1,15 +1,16 @@
 .emoji-search {
     display: flex;
     margin-top: 1rem;
+
+    button {
+        margin-right: 0;
+    }
 }
 
 .search {
     display: inline-block;
     width: 100%;
-}
-
-.search-from {
-    display: inline-block;
+    margin-left: 0;
 }
 
 .category-name {
@@ -19,8 +20,8 @@
 }
 
 .emoji-list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     width: 100%;
 }
@@ -37,6 +38,6 @@
 
 @media (max-width: 1000px) {
     .emoji-list {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 }

Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor.css

@@ -1,6 +1,10 @@
 .emoji-search {
     display: flex;
     margin: 1rem 0;
+
+    button {
+        margin-right: 0;
+    }
 }
 
 .search {
@@ -8,9 +12,13 @@
     width: 100%;
 }
 
+.search:first-of-type {
+    margin-left: 0;
+}
+
 .emoji-list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     width: 100%;
 }
@@ -19,4 +27,10 @@
     display: flex;
     justify-content: center;
     margin-top: 5rem;
+}
+
+@media (max-width: 1000px) {
+    .emoji-list {
+        flex-direction: column;
+    }
 }