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.
This commit is contained in:
parent
03afa31b5f
commit
03652c0748
|
|
@ -166,6 +166,12 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex-shrink: 0;
|
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;
|
background: #252526;
|
||||||
border-bottom: 1px solid #333;
|
border-bottom: 1px solid #333;
|
||||||
min-height: 38px;
|
min-height: 38px;
|
||||||
|
|
|
||||||
|
|
@ -461,6 +461,9 @@ export const EditorPage: React.FC = () => {
|
||||||
className="view-mode-toggle"
|
className="view-mode-toggle"
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
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,
|
gap: 1,
|
||||||
background: '#252526',
|
background: '#252526',
|
||||||
border: '1px solid #3c3c3c',
|
border: '1px solid #3c3c3c',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue