From dc0549189950d7e27578a3a58384a9a44cc20b97 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 14 Jun 2026 16:27:05 -0400
Subject: [PATCH] playground: status counter sits under run+cancel instead of
 far right

---
 wasm/app/style.css       | 10 ++++++++--
 www/playground/style.css | 10 ++++++++--
 www/repl/style.css       | 10 ++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/wasm/app/style.css b/wasm/app/style.css
index 94e03a9..01e4413 100644
--- a/wasm/app/style.css
+++ b/wasm/app/style.css
@@ -133,7 +133,8 @@ header code {
   border-bottom: 1px solid var(--rule);
   display: grid;
   grid-template-columns: auto auto auto auto 1fr;
-  gap: 1rem;
+  grid-template-rows: auto auto;
+  gap: 0.3rem 1rem;
   align-items: center;
   background: var(--bg);
 }
@@ -194,9 +195,14 @@ header code {
 }
 
 .controls .status {
+  /* Tuck the live ms counter directly under the run + cancel buttons
+   * (columns 3-4 in the controls grid) so the eye finds the elapsed
+   * timer next to the action that started it. */
+  grid-column: 3 / span 2;
+  grid-row: 2;
+  justify-self: start;
   color: var(--muted);
   font-size: 0.8em;
-  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
diff --git a/www/playground/style.css b/www/playground/style.css
index 94e03a9..01e4413 100644
--- a/www/playground/style.css
+++ b/www/playground/style.css
@@ -133,7 +133,8 @@ header code {
   border-bottom: 1px solid var(--rule);
   display: grid;
   grid-template-columns: auto auto auto auto 1fr;
-  gap: 1rem;
+  grid-template-rows: auto auto;
+  gap: 0.3rem 1rem;
   align-items: center;
   background: var(--bg);
 }
@@ -194,9 +195,14 @@ header code {
 }
 
 .controls .status {
+  /* Tuck the live ms counter directly under the run + cancel buttons
+   * (columns 3-4 in the controls grid) so the eye finds the elapsed
+   * timer next to the action that started it. */
+  grid-column: 3 / span 2;
+  grid-row: 2;
+  justify-self: start;
   color: var(--muted);
   font-size: 0.8em;
-  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }
diff --git a/www/repl/style.css b/www/repl/style.css
index 94e03a9..01e4413 100644
--- a/www/repl/style.css
+++ b/www/repl/style.css
@@ -133,7 +133,8 @@ header code {
   border-bottom: 1px solid var(--rule);
   display: grid;
   grid-template-columns: auto auto auto auto 1fr;
-  gap: 1rem;
+  grid-template-rows: auto auto;
+  gap: 0.3rem 1rem;
   align-items: center;
   background: var(--bg);
 }
@@ -194,9 +195,14 @@ header code {
 }
 
 .controls .status {
+  /* Tuck the live ms counter directly under the run + cancel buttons
+   * (columns 3-4 in the controls grid) so the eye finds the elapsed
+   * timer next to the action that started it. */
+  grid-column: 3 / span 2;
+  grid-row: 2;
+  justify-self: start;
   color: var(--muted);
   font-size: 0.8em;
-  justify-self: end;
 }
 .controls .status.busy { color: var(--busy); }
 .controls .status.warn { color: var(--busy); }