a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): no awkward middle state for the in-header strip 

At 1440x900 with the chat docked, the merged header hit an ugly in-between:
the wrapped canvas controls floated as an orphan group inside a tall
transparent header, next to a dead gap before the language/user controls.
Reported by the user as "se ve raro" — wider screens looked fine.

Below the width where one row genuinely fits (thresholds account for the
docked chat's 380px / collapsed 36px reservation), the strip now falls
back to being its own full-width second bar with its old background and
border — the exact familiar pre-merge layout. Wide screens keep the
single 44px row; tight screens get the classic two bars; the broken-
looking limbo between them no longer exists.
This commit is contained in:
David Montero Crespo 2026-07-30 19:43:31 +02:00
parent 8868a3c585
commit fff5823543
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/App.css
View File

@ -530,3 +530,62 @@ body {
border-bottom: none;
height: 44px;
}
/* ── Tight fallback for the in-header strip ──────────────────────────────
Between "fits in one row" and "phone" there is an awkward middle (e.g.
1440px with the chat docked) where flex-wrap produced an orphan group of
canvas controls floating inside a tall transparent header, next to a
dead hole before the right-side controls. Below the width where one row
GENUINELY fits — thresholds account for the docked chat's reserved
380px / 36px — the strip drops back to being its own full-width second
bar with its old skin: exactly the familiar pre-merge layout, which
reads as intentional instead of broken. Three blocks because a media
query cannot test a body class in its condition. */
@media (max-width: 1199.9px) {
.app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
.app-header--with-toolbar .header-editor-toolbar {
flex-basis: 100%;
order: 10;
margin: 0 -16px;
}
.app-header--with-toolbar .header-editor-toolbar .unified-toolbar {
background: #252526;
border-top: 1px solid #333;
min-height: 38px;
}
}
@media (max-width: 1239.9px) {
body.velxio-agent-collapsed .app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
body.velxio-agent-collapsed .app-header--with-toolbar .header-editor-toolbar {
flex-basis: 100%;
order: 10;
margin: 0 -16px;
}
body.velxio-agent-collapsed .app-header--with-toolbar .header-editor-toolbar .unified-toolbar {
background: #252526;
border-top: 1px solid #333;
min-height: 38px;
}
}
@media (max-width: 1579.9px) {
body.velxio-agent-open .app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
body.velxio-agent-open .app-header--with-toolbar .header-editor-toolbar {
flex-basis: 100%;
order: 10;
margin: 0 -16px;
}
body.velxio-agent-open .app-header--with-toolbar .header-editor-toolbar .unified-toolbar {
background: #252526;
border-top: 1px solid #333;
min-height: 38px;
}
}