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

fix(editor): corner box escapes the header's containing block 

The header's backdrop-filter makes it a containing block for fixed
descendants, so the corner box's bottom:8px resolved against the 45px
header — measured at y=-4, sitting on the logo. Portaled to <body>, where
fixed means the viewport. The auth slot keeps working: pro's injector
finds it by attribute wherever it lives.
This commit is contained in:
David Montero Crespo 2026-07-30 20:09:30 +02:00
parent 3100d453c2
commit 341bebeb39
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/layout/AppHeader.tsx
View File

@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useProjectStore } from '../../store/useProjectStore';
@ -310,13 +311,18 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave, editorMenu, edit
{/* 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>
)}
Portaled to <body>: the header's backdrop-filter makes it a
containing block, so a fixed child positioned inside it lands at
the header's bottom (the top of the page) instead of the
viewport's — measured at y=-4, on top of the logo. */}
{editorToolbar &&
createPortal(
<div className="editor-corner-box">
<LanguageSwitcher />
<div data-velxio-slot="header-auth" style={{ display: 'contents' }} />
</div>,
document.body,
)}
{showShareModal && <ShareModal onClose={() => setShowShareModal(false)} />}
</header>