Settings overview: collapse to single column on narrow viewports

Hardcoded grid-template-columns: 1fr 1fr was overflowing on mobile.
Now uses a class that becomes 1fr at <=900px so cards stack instead
of being clipped.

Author: vekexasia

web/src/app/admin/admin.css

@@ -37,6 +37,16 @@
   }
 }
 
+/* Settings overview grid: 2 columns on wide viewports, 1 column when narrow. */
+.adm-settings-grid {
+  grid-template-columns: 1fr 1fr;
+}
+@media (max-width: 900px) {
+  .adm-settings-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 /* Table rows hover */
 .adm-row:hover { background: #F4F2EE !important; }
 

web/src/components/admin/pages/SettingsPage.tsx

@@ -432,8 +432,8 @@ export default function SettingsPage({ section }: { section?: SettingsSection }
 
         <div style={{ maxWidth: section ? 720 : 1200 }}>
 
-          {/* ── 2-column grid (single column when a sub-section is selected) ── */}
-          <div style={{ display: section ? "block" : "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
+          {/* ── 2-column grid (single column when a sub-section is selected, or on narrow viewports) ── */}
+          <div className={section ? undefined : "adm-settings-grid"} style={section ? { display: "block" } : { display: "grid", gap: 16, alignItems: "start" }}>
 
             {/* ── LEFT column ── */}
             <div>