From 52cab2408ea4b22311035f7292e028cda64d5178 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Wed, 30 Sep 2026 06:32:30 +0000
Subject: [PATCH] Plugin Studio on a phone: a button to collapse the header

The layout hides the header's meta slot at phone width (its 56px bar has no
room for it), and the "Hide header" button lived there, so on a phone the
header could not be collapsed at all. A phone-only copy of the button now sits
in the header's end corner (44px, the tabs' corner radius, the same localised
label). The floating "Show header" button brings the header back, as on a
desktop. Wider screens are unchanged.
---
 plugin-designs/plugin-studio/plugin-studio.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/plugin-designs/plugin-studio/plugin-studio.vue b/plugin-designs/plugin-studio/plugin-studio.vue
index 9f80f57fa..99edf17a6 100644
--- a/plugin-designs/plugin-studio/plugin-studio.vue
+++ b/plugin-designs/plugin-studio/plugin-studio.vue
@@ -76,6 +76,12 @@
           <path d="M12 16v5" />
         </svg>
       </span>
+      <!-- ON A PHONE the layout hides the header's #meta slot (its 56px bar has no room for it), and the
+           "Hide header" button in #meta went with it, so a phone could not collapse the header at all. This
+           copy shows only at phone width, pinned to the header's end corner; the one in #meta serves wider
+           screens. The floating "Show header" button below brings the header back, as on a desktop. -->
+      <button type="button" class="ps-hide-header-phone" :title="tr('hideHeader')" :aria-label="tr('hideHeader')"
+        @click="setHeaderHidden(true)"><span aria-hidden="true">⌃</span></button>
     </template>
 
     <!-- #meta: the bundle/element count + an i18n locale toggle. The studio previews LOCALISED
@@ -248,6 +254,8 @@ const PS_SHADOW_CSS = `
 .ps-token { position:relative; display:inline-flex; }
 .ps-show-header { position:fixed; top:8px; inset-inline-end:8px; z-index:2147483000; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #d1d4cd; border-radius:999px; background:rgba(255,255,255,.94); color:#3b463d; font:600 12px system-ui, sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); }
 .ps-show-header:hover, .ps-show-header:focus-visible { background:#ffffff; outline:2px solid #92b195; }
+.ps-hide-header-phone { display:none; }
+@media (max-width:760px) { .ps-hide-header-phone { display:inline-flex; position:fixed; top:6px; inset-inline-end:8px; z-index:4; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #d1d4cd; border-radius:var(--vtl-radius,8px); background:#d1d4cd; color:#3b463d; font:18px/1 system-ui, sans-serif; cursor:pointer; } }
 .ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
 .ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }
 .ps-token-dot.is-built { background:#c9b36a; }
@@ -1274,6 +1282,8 @@ export default defineComponent({
 .ps-token { position:relative; display:inline-flex; }
 .ps-show-header { position:fixed; top:8px; inset-inline-end:8px; z-index:2147483000; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #d1d4cd; border-radius:999px; background:rgba(255,255,255,.94); color:#3b463d; font:600 12px system-ui, sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); }
 .ps-show-header:hover, .ps-show-header:focus-visible { background:#ffffff; outline:2px solid #92b195; }
+.ps-hide-header-phone { display:none; }
+@media (max-width:760px) { .ps-hide-header-phone { display:inline-flex; position:fixed; top:6px; inset-inline-end:8px; z-index:4; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #d1d4cd; border-radius:var(--vtl-radius,8px); background:#d1d4cd; color:#3b463d; font:18px/1 system-ui, sans-serif; cursor:pointer; } }
 .ps-token-dot { width:8px; height:8px; border-radius:50%; background:#b8bdb4; }
 .ps-token-dot.is-yours, .ps-token-dot.is-url { background:#92b195; }
 .ps-token-dot.is-built { background:#c9b36a; }