From 3100d453c2149a1f25ffe9d5a26ca2cef90af7d3 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Thu, 30 Jul 2026 19:52:58 +0200
Subject: [PATCH] feat(editor): language + account move to a bottom-left corner
 box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/src/App.css                         | 32 ++++++++++++++++++--
 frontend/src/components/layout/AppHeader.tsx | 27 +++++++++++++++--
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 22a73d7b..144fc984 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -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;
+}
diff --git a/frontend/src/components/layout/AppHeader.tsx b/frontend/src/components/layout/AppHeader.tsx
index 7d88e0c2..83578741 100644
--- a/frontend/src/components/layout/AppHeader.tsx
+++ b/frontend/src/components/layout/AppHeader.tsx
@@ -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>
   );