Tighten admin form layout and responsive tables

frontend/src/css/admin.css

@@ -34,13 +34,16 @@
   border-radius: var(--radius);
   padding: 20px;
   box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .form-grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 12px;
-  margin: 12px 0 16px;
+  margin: 12px 0 8px;
 }
 
 .form-grid label {
@@ -68,6 +71,7 @@ select {
   border: 1px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
+  width: 100%;
 }
 
 .table-row {
@@ -94,6 +98,13 @@ select {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr);
 }
 
+.table-row span,
+.table-row select {
+  width: 100%;
+  display: block;
+  overflow-wrap: anywhere;
+}
+
 .table .user {
   font-weight: 700;
 }
@@ -102,6 +113,7 @@ select {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .ghost {
@@ -138,3 +150,15 @@ select {
   color: #f87171;
   margin-top: 10px;
 }
+
+@media (max-width: 640px) {
+  .admin-grid {
+    grid-template-columns: 1fr;
+  }
+  .table-row {
+    grid-template-columns: 1fr;
+  }
+  .table .actions {
+    justify-content: flex-start;
+  }
+}