[O] Layout on phone screen

one-among-us · Oct 22, 2024 · a347b5d · a347b5d
1 parent d387fd8
commit a347b5d
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -350,6 +350,21 @@ export default class Home extends Vue {
             height: $len
             width: $len
 
+@media screen and (max-width: 700px)
+    .search-bar
+        display: flex
+        flex-direction: column
+        gap: 0.5rem
+
+        .search-icon
+            display: none
+
+        .search-input
+            width: calc(100% - 40px)
+
+        .search-date
+            width: 100%
+
 [data-theme="dark"]
     .back, .front
         border: 10px solid rgba(27, 27, 32, 0.8964) !important