From e9053f73fe74aa532677c05cadd0d0d66fdf8bf5 Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Fri, 31 Jul 2026 00:46:08 +0200 Subject: [PATCH] ui(editor): one control height and one blue across the toolbar strip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every control in the unified strip is now 28px tall: tb-btn (was 30), Libraries (was 26), the C++/MicroPython select (was ~22), the board selector, Serial/Scope, canvas icon buttons, zoom and Add (all were 32). The explorer toggle moves inside the Code/Both/Circuit segmented group as its first segment, and every active-segment blue is the Libraries blue (var(--color-action-primary)) instead of the hardcoded #0e639c. The editor zone's overlap floor becomes min-width: max-content — the hardcoded 280px sat below the real content width, letting the console button paint over the board selector when the docked chat narrowed the bar. Now the zone can never shrink under its buttons; flex-wrap moves the canvas controls to a second line instead. Also closes the gap between the logo and the File menu (header gap 16->6, menubar margin-left 14->2). --- frontend/src/App.css | 22 +++++--- .../src/components/editor/EditorMenuBar.css | 2 +- .../src/components/editor/EditorToolbar.css | 8 ++- .../src/components/editor/EditorToolbar.tsx | 6 +- .../components/simulator/SimulatorCanvas.css | 10 ++-- frontend/src/pages/EditorPage.tsx | 55 +++++++++++-------- 6 files changed, 61 insertions(+), 42 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index fd549460..0593211d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -194,17 +194,15 @@ body { } } -.unified-toolbar-explorer-toggle { - border-bottom: none; -} - .unified-toolbar-editor { flex: 1 1 auto; - /* Floor the editor zone at its fully-collapsed content width so it can never - shrink *under* its own buttons and paint them over the adjacent canvas - controls. Below this floor the (lower-priority) canvas controls get pushed - toward the right edge instead of overlapping — never the other way. */ - min-width: 280px; + /* Floor the editor zone at its own content width so it can never shrink + *under* its buttons and paint them over the adjacent canvas controls + (a hardcoded 280px floor sat below the real content width, letting the + console button overlap the board selector with the chat docked). When + the row genuinely cannot fit, the bar's flex-wrap moves the canvas + controls to a second line instead — never an overlap. */ + min-width: max-content; display: flex; } @@ -518,6 +516,12 @@ body { align-items: center; } +/* Logo and the File menu read as one menubar — the marketing-header 16px + gap left a hole between them in the editor. */ +.app-header--with-toolbar .header-left { + gap: 6px; +} + .app-header--with-toolbar .header-content { align-items: stretch; } diff --git a/frontend/src/components/editor/EditorMenuBar.css b/frontend/src/components/editor/EditorMenuBar.css index ae014e3e..abe54e53 100644 --- a/frontend/src/components/editor/EditorMenuBar.css +++ b/frontend/src/components/editor/EditorMenuBar.css @@ -6,7 +6,7 @@ display: flex; align-items: center; gap: 2px; - margin-left: 14px; + margin-left: 2px; } .emb-root { diff --git a/frontend/src/components/editor/EditorToolbar.css b/frontend/src/components/editor/EditorToolbar.css index 3a071aa9..28e81f81 100644 --- a/frontend/src/components/editor/EditorToolbar.css +++ b/frontend/src/components/editor/EditorToolbar.css @@ -58,8 +58,10 @@ /* ── Icon buttons ───────────────────────────────── */ .tb-btn { - width: 30px; - height: 30px; + /* 28px — the one control height across the whole editor strip (view-mode + segments, Libraries, language select, canvas controls all match). */ + width: 28px; + height: 28px; display: flex; align-items: center; justify-content: center; @@ -121,7 +123,7 @@ display: flex; align-items: center; gap: 4px; - height: 26px; + height: 28px; padding: 0 8px 0 7px; border: none; border-radius: 5px; diff --git a/frontend/src/components/editor/EditorToolbar.tsx b/frontend/src/components/editor/EditorToolbar.tsx index 5d320f25..ef45c420 100644 --- a/frontend/src/components/editor/EditorToolbar.tsx +++ b/frontend/src/components/editor/EditorToolbar.tsx @@ -1445,8 +1445,10 @@ export const EditorToolbar = ({ color: '#ccc', border: '1px solid #444', borderRadius: 4, - padding: '2px 4px', - fontSize: 11, + height: 28, + alignSelf: 'center', + padding: '0 6px', + fontSize: 12, cursor: 'pointer', outline: 'none', marginRight: 4, diff --git a/frontend/src/components/simulator/SimulatorCanvas.css b/frontend/src/components/simulator/SimulatorCanvas.css index 796111c7..ae3ca489 100644 --- a/frontend/src/components/simulator/SimulatorCanvas.css +++ b/frontend/src/components/simulator/SimulatorCanvas.css @@ -87,7 +87,7 @@ font-weight: 500; cursor: pointer; transition: border-color 0.15s; - height: 32px; + height: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); @@ -111,7 +111,7 @@ align-items: center; gap: 5px; padding: 0 10px; - height: 32px; + height: 28px; background: transparent; border: 1px solid #3a4a5a; border-radius: 5px; @@ -142,8 +142,8 @@ display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; + width: 28px; + height: 28px; background: transparent; border: 1px solid #3a4a5a; border-radius: 5px; @@ -182,7 +182,7 @@ align-items: center; gap: 5px; padding: 0 10px; - height: 32px; + height: 28px; background: var(--color-action-primary); color: #fff; border: none; diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx index 468fd250..4d6d1057 100644 --- a/frontend/src/pages/EditorPage.tsx +++ b/frontend/src/pages/EditorPage.tsx @@ -402,26 +402,8 @@ export const EditorPage: React.FC = () => { const unifiedToolbar = !isMobile ? (
- - {/* View-mode toggle: Code / Both / Circuit. Lets users hide a - pane to give the right-docked AI chat more breathing room. + {/* View-mode toggle: explorer | Code / Both / Circuit — one + segmented group so the four pane switches read as one control. Hidden on mobile — there's already a code/circuit toggle in the mobile bottom-nav. */}
{ className="view-mode-toggle" style={{ display: 'flex', - // Never squeezed below its three buttons: flexbox used to crush + // Never squeezed below its buttons: flexbox used to crush // this block to a third of its width and clip two of them. flexShrink: 0, gap: 1, @@ -442,6 +424,35 @@ export const EditorPage: React.FC = () => { margin: '0 6px', }} > + +
{( [ { key: 'code', label: t('editor.shell.code'), path: 'M16 18l6-6-6-6M8 6l-6 6 6 6' }, @@ -454,7 +465,7 @@ export const EditorPage: React.FC = () => { onClick={() => setViewMode(m.key)} aria-pressed={viewMode === m.key} style={{ - background: viewMode === m.key ? '#0e639c' : 'transparent', + background: viewMode === m.key ? 'var(--color-action-primary)' : 'transparent', color: viewMode === m.key ? 'white' : '#aaa', border: 'none', height: 28,