From c0305aab92d59198f4ca41c5212b31ad0f0eca99 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 18:58:29 +0000
Subject: [PATCH 1/2] playground: balance the mobile toolbar export buttons

The two motion-export buttons (Download BVH / Download glTF) auto-flowed into
the mobile toolbar grid and landed in the left half of a row, leaving the
right half empty and the cluster looking ragged.

Group them in a `.tb-downloads` wrapper that is `display: contents` on desktop
(so the desktop flex toolbar is unchanged) and becomes a single full-width
grid row split into two equal halves on mobile. No design-language changes:
same buttons, colours, and radius, just a balanced layout.

Signed-off-by: Claude <noreply@anthropic.com>
---
 playground/play.html     | 34 ++++++++++++++++++----------------
 playground/src/style.css | 22 ++++++++++++++++++++++
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/playground/play.html b/playground/play.html
index 87479a4..405c120 100644
--- a/playground/play.html
+++ b/playground/play.html
@@ -119,22 +119,24 @@
           <span class="ico-link" aria-hidden="true"></span
           ><span class="lbl" aria-live="polite">Share</span>
         </button>
-        <button
-          id="download-bvh"
-          class="btn ghost"
-          aria-label="Download BVH"
-          title="Download the movement as a .bvh motion file for Blender and other tools"
-        >
-          <span class="lbl" aria-live="polite">Download BVH</span>
-        </button>
-        <button
-          id="download-gltf"
-          class="btn ghost"
-          aria-label="Download glTF"
-          title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
-        >
-          <span class="lbl" aria-live="polite">Download glTF</span>
-        </button>
+        <div class="tb-downloads">
+          <button
+            id="download-bvh"
+            class="btn ghost"
+            aria-label="Download BVH"
+            title="Download the movement as a .bvh motion file for Blender and other tools"
+          >
+            <span class="lbl" aria-live="polite">Download BVH</span>
+          </button>
+          <button
+            id="download-gltf"
+            class="btn ghost"
+            aria-label="Download glTF"
+            title="Download the movement as a .glb glTF asset (rig + animation) for Three.js and web pipelines"
+          >
+            <span class="lbl" aria-live="polite">Download glTF</span>
+          </button>
+        </div>
         <button
           id="copy-prompt"
           class="btn primary"
diff --git a/playground/src/style.css b/playground/src/style.css
index 0c5708d..bbb3a64 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -301,6 +301,14 @@ select:hover {
   align-items: center;
 }
 
+/* The two motion-export buttons are grouped so mobile can lay them out as one
+   balanced row. On desktop the wrapper is transparent (`display: contents`),
+   so the buttons stay direct children of the flex toolbar and the desktop row
+   is unchanged. */
+.tb-downloads {
+  display: contents;
+}
+
 /* Movement-library trigger — the one content control in the topbar. Reads like
    a select (kicker, current movement, caret) but opens the full browse panel. */
 .lib-btn {
@@ -1599,6 +1607,20 @@ select:hover {
     grid-row: 2;
     min-height: 42px;
   }
+  /* Motion-export buttons: one full-width row, split into two equal halves so
+     they read as a balanced pair instead of hugging the left of the grid. */
+  .tb-downloads {
+    display: flex;
+    grid-column: 1 / -1;
+    grid-row: 3;
+    gap: 6px;
+  }
+  .tb-downloads > .btn {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 42px;
+    justify-content: center;
+  }
   .intro { padding-left: 12px; padding-right: 12px; }
   .layout { grid-template-columns: 1fr; }
   .floor-guide-key {

From c7dc07d0648a55398a21b3d65bc312fa7d33e60f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 19:21:37 +0000
Subject: [PATCH 2/2] playground: hide motion-export buttons on mobile instead
 of balancing them

A downloaded .bvh/.glb is only useful in a desktop pipeline (Blender, a
Three.js project, a game engine), so the export buttons have no real audience
on a phone. Hide .tb-downloads on mobile entirely rather than laying it out as
a row, which removes the third toolbar row and keeps mobile to the two rows
that matter. Desktop is unchanged and still shows both buttons.

Signed-off-by: Claude <noreply@anthropic.com>
---
 playground/src/style.css | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/playground/src/style.css b/playground/src/style.css
index bbb3a64..a3a3b6c 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -1607,19 +1607,12 @@ select:hover {
     grid-row: 2;
     min-height: 42px;
   }
-  /* Motion-export buttons: one full-width row, split into two equal halves so
-     they read as a balanced pair instead of hugging the left of the grid. */
+  /* Motion export (BVH / glTF) is a desktop-pipeline action — a downloaded
+     .bvh/.glb is only useful in Blender, a Three.js project, or a game engine,
+     none of which live on the phone. Hide it on mobile to keep the toolbar to
+     the two rows that matter (movement + primary CTA); it stays on desktop. */
   .tb-downloads {
-    display: flex;
-    grid-column: 1 / -1;
-    grid-row: 3;
-    gap: 6px;
-  }
-  .tb-downloads > .btn {
-    flex: 1 1 0;
-    min-width: 0;
-    min-height: 42px;
-    justify-content: center;
+    display: none;
   }
   .intro { padding-left: 12px; padding-right: 12px; }
   .layout { grid-template-columns: 1fr; }