From 6dc478e9895c2f8415ed179444434c5084979f05 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 2 Jul 2026 16:16:52 -0400
Subject: [PATCH] fix(desktop): Custom Window Chrome toggle breaks the timeline
 (P5-47)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toggling custom chrome expanded the screen and sent the message feed
auto-scrolling into the past. Two causes:
- DesktopChrome used height:100vh while html/#root use 100dvh; in the Tauri
  webview 100vh can exceed the visible height after decorations are stripped,
  making the timeline's scroll container taller than the viewport → the virtual
  paginator runs away paginating backwards. Switched to 100dvh.
- Toggling live reflowed the whole app while the timeline was mounted. The
  setting now persists + reloads so the layout is rebuilt cleanly (description
  updated: "reloads to apply").

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 LOTUS_TESTING.md                              |  2 ++
 src/app/features/settings/general/General.tsx | 13 +++++++++++--
 src/app/pages/App.tsx                         |  6 +++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/LOTUS_TESTING.md b/LOTUS_TESTING.md
index 3bca4e865..9ad4122e7 100644
--- a/LOTUS_TESTING.md
+++ b/LOTUS_TESTING.md
@@ -675,6 +675,8 @@ Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view,
 
 ## Outstanding verification backlog
 
+**Custom Window Chrome (Beta) fix (2026-07):** on the desktop build, Settings → General → toggle **Custom Window Chrome** — it should reload and come up with the Lotus title bar and a normal, stable feed (no screen-expand / auto-scroll-into-the-past). Toggle back off → reloads to the native frame.
+
 _Ported from the retired `LOTUS_BUGS.md` (2026-07). Compact index of shipped-but-not-live-tested items; the detailed steps are in the lettered sections above._
 
 Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 528cf6c74..adb5c5295 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -118,12 +118,21 @@ import { SettingsSelect } from '../../../components/settings-select/SettingsSele
 function DesktopChromeSetting() {
   const [customChrome, setCustomChrome] = useAtom(customWindowChromeAtom);
   if (!isTauriEnv()) return null;
+  // Persist the flag, then reload so the window layout is rebuilt from scratch.
+  // Toggling live reflows the whole app while the room timeline is mounted, which
+  // resizes its virtualized scroll container and triggers runaway back-pagination
+  // (the "screen expands + auto-scrolls into the past" bug). A reload applies the
+  // chrome cleanly against a fresh, correct layout.
+  const handleToggle = (value: boolean) => {
+    setCustomChrome(value);
+    window.location.reload();
+  };
   return (
     <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
       <SettingTile
         title="Custom Window Chrome (Beta)"
-        description="Replace the system title bar with a Lotus-styled one. Desktop only — toggles instantly."
-        after={<Switch variant="Primary" value={customChrome} onChange={setCustomChrome} />}
+        description="Replace the system title bar with a Lotus-styled one. Desktop only — reloads to apply."
+        after={<Switch variant="Primary" value={customChrome} onChange={handleToggle} />}
       />
     </SequenceCard>
   );
diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx
index 1ca919eb0..0632a2777 100644
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -110,7 +110,11 @@ function DesktopChrome({ children }: { children: ReactNode }) {
     <div
       style={
         useChrome
-          ? { display: 'flex', flexDirection: 'column', height: '100vh' }
+          ? // Match html/#root (100dvh), NOT 100vh — in the Tauri webview 100vh
+            // can exceed the visible height after decorations are stripped, which
+            // makes the timeline's scroll container taller than the viewport and
+            // sends the virtual paginator into a runaway back-pagination loop.
+            { display: 'flex', flexDirection: 'column', height: '100dvh' }
           : { display: 'contents' }
       }
     >