From 9b89d0449c15039ee5b610738081c55ce12f8e45 Mon Sep 17 00:00:00 2001
From: Brad Barnett <127794626+bdbarnett@users.noreply.github.com>
Date: Sun, 11 Oct 2026 19:50:40 -0500
Subject: [PATCH] Gallery: Open in Workbench sits under the screen, beside Show
 console; the header row it was in isn't shown when a card opens a demo

---
 .site/gallery/micropython.html |  2 +-
 .site/pyscript/demo.css        | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/.site/gallery/micropython.html b/.site/gallery/micropython.html
index fe6a83427..7c344769a 100644
--- a/.site/gallery/micropython.html
+++ b/.site/gallery/micropython.html
@@ -21,7 +21,6 @@ <h1 id="loader-title">Direct MicroPython WebAssembly</h1>
                 <button class="btn" id="enable-microphone" type="button">Enable Microphone</button>
                 <button class="btn" id="reset-runtime" type="button">Reset</button>
                 <a class="btn" id="pyodide-link" href="../pyscript/pyodide.html">Pyodide alternative</a>
-                <a class="btn" id="workbench-link" href="https://pydevices.github.io/workbench/" hidden>Open in Workbench</a>
             </div>
         </div>
         <p class="loader-lede">The application runs on the main thread through the compiled <code>_wasm_bridge</code>.</p>
@@ -41,6 +40,7 @@ <h1 id="loader-title">Direct MicroPython WebAssembly</h1>
                     </div>
                     <div class="device-footer">
                         <button type="button" class="console-toggle" aria-expanded="false">Show console</button>
+                        <a class="footer-link" id="workbench-link" href="https://pydevices.github.io/workbench/" hidden>Open in Workbench</a>
                     </div>
                 </div>
             </div>
diff --git a/.site/pyscript/demo.css b/.site/pyscript/demo.css
index 7536bcd1e..d4988a439 100644
--- a/.site/pyscript/demo.css
+++ b/.site/pyscript/demo.css
@@ -393,9 +393,34 @@ body[data-runtime-state="failed"] .canvas-stage .hero-spinner {
 .device-footer {
   display: flex;
   justify-content: center;
+  gap: 8px;
   padding-top: 8px;
 }
 
+/* A link beside the console toggle, in its look. The header row isn't shown
+   when a gallery card opens a demo, so the footer is the one place it's seen. */
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--ink-soft);
+  background: var(--panel-2);
+  font: 600 0.78rem var(--font);
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+}
+
+.footer-link[hidden] {
+  display: none;
+}
+
 .console-panel[hidden] {
   display: none;
 }