From 03652c07488fe89b11a11b6ecb40a8abeb09873a Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Thu, 30 Jul 2026 16:43:46 +0200 Subject: [PATCH] fix(editor): la fila envuelve en vez de estrujar botones Con la ventana estrecha y el chat acoplado, a la fila unificada le faltan ~60px y flexbox se los quitaba al toggle Code/Both/Circuit: de 101px a 32, con dos de sus tres botones recortados a esquirlas inalcanzables bajo el overflow hidden. Medido en staging a 1024px. El toggle deja de encogerse (flex-shrink 0) y la fila hace wrap: cuando de verdad no cabe, los controles del canvas bajan a una segunda linea corta. Dos filas breves ganan a botones invisibles. --- frontend/src/App.css | 6 ++++++ frontend/src/pages/EditorPage.tsx | 3 +++ 2 files changed, 9 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index c5791c9b..e4147ade 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -166,6 +166,12 @@ body { display: flex; align-items: stretch; flex-shrink: 0; + /* When the row genuinely cannot fit (narrow window + docked chat), wrap + the canvas controls onto a second line instead of letting flexbox + squeeze fixed blocks below their content — that used to crush the + Code/Both/Circuit toggle to a third of its width, clipping two of its + buttons into unreachable slivers. Two short rows beat hidden buttons. */ + flex-wrap: wrap; background: #252526; border-bottom: 1px solid #333; min-height: 38px; diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx index 6125525c..536afbee 100644 --- a/frontend/src/pages/EditorPage.tsx +++ b/frontend/src/pages/EditorPage.tsx @@ -461,6 +461,9 @@ export const EditorPage: React.FC = () => { className="view-mode-toggle" style={{ display: 'flex', + // Never squeezed below its three buttons: flexbox used to crush + // this block to a third of its width and clip two of them. + flexShrink: 0, gap: 1, background: '#252526', border: '1px solid #3c3c3c',