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:
parent
fff5823543
commit
3100d453c2
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue