feat(editor): language + account move to a bottom-left corner box

IDE-style: a small fixed box in the explorer's quiet bottom corner holds
the language switcher and the account button (pro keeps injecting it into
the same data-velxio-slot, just relocated). The autosave dot rides next
to the menus, and the header's Share button is gone — File > Share/Embed
already covers it.

The point is width: emptying the header's right side gives the toolbar
the last ~150px it needed, so the single-row layout now holds down to
~1400px WITH the chat docked — which is exactly the reported 1440x900
case. Tight-fallback thresholds drop accordingly (1400/1060/1040).

Desktop-editor variant only; marketing pages and mobile keep their
header untouched.
This commit is contained in:
David Montero Crespo 2026-07-30 19:52:58 +02:00
parent fff5823543
commit 3100d453c2
2 changed files with 54 additions and 5 deletions

View File

@ -542,7 +542,7 @@ body {
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) {
@media (max-width: 1039.9px) {
.app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
@ -558,7 +558,7 @@ body {
}
}
@media (max-width: 1239.9px) {
@media (max-width: 1059.9px) {
body.velxio-agent-collapsed .app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
@ -574,7 +574,7 @@ body {
}
}
@media (max-width: 1579.9px) {
@media (max-width: 1399.9px) {
body.velxio-agent-open .app-header--with-toolbar .header-content {
flex-wrap: wrap;
}
@ -589,3 +589,29 @@ body {
min-height: 38px;
}
}
/* Editor corner box (bottom-left)
Language switcher + account button, IDE style. Moving them out of the
header is what buys the toolbar the last ~150px it needed to keep the
single-row layout on 1440px screens with the chat docked. */
.editor-corner-box {
position: fixed;
left: 8px;
bottom: 8px;
z-index: 7000; /* above the canvas, below the chat (8000) and modals */
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: rgba(23, 26, 33, 0.95);
border: 1px solid #2f3542;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
/* With the chat rising to the very top (agent CSS sets the header's
padding-right), the strip must NOT also pad itself that would double
the reservation and squeeze the toolbar by another panel-width. */
.app-header--with-toolbar .header-editor-toolbar .unified-toolbar {
padding-right: 6px !important;
}

View File

@ -222,9 +222,21 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave, editorMenu, edit
</div>
{/* Editor toolbar strip — fills the middle the nav vacated. */}
{editorToolbar && <div className="header-editor-toolbar">{editorToolbar}</div>}
{editorToolbar && (
<>
{autoSave && currentProject && <AutoSaveIndicator state={autoSave} />}
<div className="header-editor-toolbar">{editorToolbar}</div>
</>
)}
{/* Right: language + share + auth + mobile hamburger */}
{/* Right: language + share + auth + mobile hamburger. In the
desktop-editor variant this block does not render at all: the
language switcher and the account button move to the corner box
below (bottom-left), Share lives in File > Share/Embed, and the
autosave dot rides next to the menus every pixel of the row
goes to the toolbar, which is what lets 1440px-with-chat keep
the single-row layout. */}
{!editorToolbar && (
<div className="header-right">
<LanguageSwitcher />
@ -293,8 +305,19 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave, editorMenu, edit
</button>
)}
</div>
)}
</div>
{/* Editor corner box bottom-left, IDE style: the account button
(pro injects it into the auth slot) and the language switcher.
Fixed, so it floats over the explorer's quiet bottom corner. */}
{editorToolbar && (
<div className="editor-corner-box">
<LanguageSwitcher />
<div data-velxio-slot="header-auth" style={{ display: 'contents' }} />
</div>
)}
{showShareModal && <ShareModal onClose={() => setShowShareModal(false)} />}
</header>
);