From 6da5f6a74cb5e0470ff342f2a7e8a6a058a587d3 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Wed, 25 Mar 2026 16:34:55 +0100
Subject: [PATCH] Move zoom from document root to main content area only

Sidebar now stays at fixed size regardless of font setting. Only the
content area (feed, settings, thread, articles, etc.) scales with the
font size preference. This prevents the sidebar from bloating and
eating into content space at larger zoom levels.
---
 src/App.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5a00e4e..15f8e20 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -66,9 +66,12 @@ function App() {
 
   useKeyboardShortcuts();
 
-  // Apply zoom level based on font size setting
+  // Apply zoom to main content area only (sidebar stays fixed size)
   useEffect(() => {
-    document.documentElement.style.zoom = `${fontSize / 14}`;
+    // Clear any old root zoom
+    document.documentElement.style.zoom = "";
+    // Set CSS custom property for components that need to know the scale
+    document.documentElement.style.setProperty("--ui-zoom", `${fontSize / 14}`);
   }, [fontSize]);
 
   // Apply color theme
@@ -104,7 +107,7 @@ function App() {
       <UpdateBanner />
       <div className="flex flex-1 min-h-0">
       <Sidebar />
-      <main className="flex-1 min-w-0">
+      <main className="flex-1 min-w-0 h-full overflow-hidden" style={{ zoom: `${fontSize / 14}` }}>
         <div className={currentView === "feed" ? "contents" : "hidden"}>
           <Feed />
         </div>