fix(css): mobile breaks startpage

Author: ThorstenSuckow

src/components/SignersList.module.css

@@ -17,51 +17,51 @@
     padding: 0;
     margin: 0;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 12px;
-    max-width: 760px;
-    margin-left: auto;
-    margin-right: auto;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
 }
 
 /* Full variant for signatories page - more columns, fixed width */
 .gridFull {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
     gap: 16px;
     justify-content: start;
     max-width: none;
 }
 
 /* Responsive grid adjustments */
-@media (min-width: 1200px) {
+@media (max-width: 1200px) {
     .grid {
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 14px;
     }
 
     .gridFull {
-        grid-template-columns: repeat(auto-fill, minmax(220px, 220px));
-        gap: 18px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 16px;
     }
 }
 
-@media (min-width: 1600px) {
-    .gridFull {
-        grid-template-columns: repeat(auto-fill, minmax(240px, 240px));
-        gap: 20px;
+@media (max-width: 768px) {
+    .grid {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 12px;
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 520px) {
     .grid {
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
         gap: 10px;
     }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 420px) {
     .grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
         gap: 8px;
     }
 }
@@ -144,4 +144,23 @@
     text-overflow: ellipsis;
 }
 
+@media (max-width: 520px) {
+    .signerCard {
+        padding: 6px 8px;
+        gap: 6px;
+        font-size: 0.75rem;
+    }
 
+    .signerInfo {
+        gap: 1px;
+    }
+
+    .nameLink,
+    .nameText {
+        font-size: 0.75rem;
+    }
+
+    .location {
+        font-size: 0.7rem;
+    }
+}

src/pages/index.module.css

@@ -13,7 +13,7 @@
 
 .manifestCard {
     max-width: 760px;
-    width: 100%;
+    width: min(760px, 100%);
     background: transparent;
     border-radius: 20px;
     padding: 2.5rem 2rem;
@@ -104,7 +104,7 @@
     align-items: center;
     justify-content: flex-start;
     gap: 1.1rem;
-    max-width: 400px;
+    max-width: min(420px, 90vw);
     margin: 2.25rem auto 1.75rem auto;
     padding: 0 0.5rem;
 }
@@ -116,6 +116,50 @@
     }
 }
 
+@media (max-width: 768px) {
+    .manifestContainer {
+        padding: 2.25rem 0.75rem 3rem;
+    }
+
+    .manifestCard {
+        padding: 2rem 1rem;
+    }
+
+    .manifestHeader {
+        padding-bottom: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .coreSubject {
+        font-size: 2.4rem;
+    }
+
+    .manifestContent {
+        margin-top: 1rem;
+    }
+}
+
+@media (max-width: 520px) {
+    .coreSubject {
+        font-size: 2rem;
+    }
+
+    .manifestValues {
+        gap: 0.9rem;
+    }
+
+    .manifestValueItem {
+        padding: 0.75rem 0.85rem 0.8rem;
+    }
+}
+
+@media (max-width: 420px) {
+    .manifestContent p,
+    .manifestContent li {
+        font-size: 0.95rem;
+    }
+}
+
 .manifestValueItem {
     position: relative;
     padding: 0.85rem 1rem 0.9rem;
@@ -163,5 +207,3 @@
 .overText {
     font-weight: 400;
 }
-
-