From 341bebeb39a6b859f365aad98cf7e83dfe45b2e4 Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Thu, 30 Jul 2026 20:09:30 +0200 Subject: [PATCH] fix(editor): corner box escapes the header's containing block MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 , where fixed means the viewport. The auth slot keeps working: pro's injector finds it by attribute wherever it lives. --- frontend/src/components/layout/AppHeader.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/layout/AppHeader.tsx b/frontend/src/components/layout/AppHeader.tsx index 83578741..6773787f 100644 --- a/frontend/src/components/layout/AppHeader.tsx +++ b/frontend/src/components/layout/AppHeader.tsx @@ -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 = ({ 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 && ( -
- -
-
- )} + Portaled to : 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( +
+ +
+
, + document.body, + )} {showShareModal && setShowShareModal(false)} />}