fix card view too big on mobile [#460](#460)

Author: FuzzyGrim

src/static/css/input.css

@@ -1,5 +1,9 @@
 @import "tailwindcss" source("../../");
 
+@theme {
+  --breakpoint-xs: 30rem;
+}
+
 [x-cloak] {
   display: none !important;
 }
@@ -21,8 +25,9 @@
   clip-path: inset(0 50% 0 0);
 }
 
+
 .media-grid {
-  @apply grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4;
+  @apply grid grid-cols-2 xs:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4;
 }
 
 /* https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile */

src/static/css/main.css

@@ -383,6 +383,9 @@
   }
   .container {
     width: 100%;
+    @media (width >= 30rem) {
+      max-width: 30rem;
+    }
     @media (width >= 40rem) {
       max-width: 40rem;
     }
@@ -2600,8 +2603,11 @@
 }
 .media-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: calc(var(--spacing) * 4);
+  @media (width >= 30rem) {
+    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
+  }
 }
 .toast-error {
   border-color: var(--color-red-600);