Lay out frontend panels in a 2-up / 3-up grid

Put Submit and Load burst side by side on the first row at half width,
and Result, Chaos and Service health on the second row at a third each.
Uses a 6-column grid so the gap is accounted for exactly; stacks to one
column below 900px.

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

services/gateway/static/index.html

@@ -34,12 +34,6 @@
       </form>
     </section>
 
-    <section id="result-panel">
-      <h2>Result</h2>
-      <p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
-      <pre id="result-json">(nothing yet)</pre>
-    </section>
-
     <section id="load-panel">
       <h2>Load burst</h2>
       <label>N
@@ -58,6 +52,12 @@
       </table>
     </section>
 
+    <section id="result-panel">
+      <h2>Result</h2>
+      <p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
+      <pre id="result-json">(nothing yet)</pre>
+    </section>
+
     <section id="chaos-panel">
       <h2>Chaos</h2>
       <div id="chaos-flags"></div>

services/gateway/static/style.css

@@ -39,13 +39,34 @@ 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(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 1.5rem;
   margin-top: 1.5rem;
 }
 
+main > section {
+  grid-column: span 2;
+  min-width: 0;
+}
+
+#submit-panel,
+#load-panel {
+  grid-column: span 3;
+}
+
+@media (max-width: 900px) {
+  main > section,
+  #submit-panel,
+  #load-panel {
+    grid-column: 1 / -1;
+  }
+}
+
 section {
   background: var(--panel);
   border: 1px solid var(--border);