Group frontend panels into explicit row containers

Wrap Submit and Load burst in one full-width .row and Result, Chaos and
Service health in a second. Each .row splits its width evenly between its
panels (gap subtracted first) and stacks below 900px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

services/gateway/static/style.css

@@ -39,31 +39,27 @@ header h1 {
   font-size: 0.85rem;
 }
 
-/* 6-column grid: row 1 panels span 3 (half), row 2 panels span 2 (third).
-   The grid gap is subtracted before dividing, so with gap g and width W
-   a half panel is (W - g) / 2 and a third panel is (W - 2g) / 3. */
 main {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: flex;
+  flex-direction: column;
   gap: 1.5rem;
   margin-top: 1.5rem;
 }
 
-main > section {
-  grid-column: span 2;
-  min-width: 0;
-}
-
-#submit-panel,
-#load-panel {
-  grid-column: span 3;
+/* Each row is full width and splits it evenly between its panels. The gap
+   is subtracted before dividing, so with gap g and width W two panels are
+   (W - g) / 2 each and three panels are (W - 2g) / 3 each. */
+.row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 1.5rem;
+  width: 100%;
 }
 
 @media (max-width: 900px) {
-  main > section,
-  #submit-panel,
-  #load-panel {
-    grid-column: 1 / -1;
+  .row {
+    grid-auto-flow: row;
   }
 }