fix: measure sidebar min width from children intrinsic widths

scrollWidth on a block flex element returns parent width, not content
width. Now sums getBoundingClientRect().width of each child element
(text span + unread badge) for a screen-independent measurement.

1 files changed, 16 insertions, 2 deletions

diff --git a/apps/web/app/reader/_components/reader-layout-shell.tsx b/apps/web/app/reader/_components/reader-layout-shell.tsx
index 0795780..bc7be8b 100644
--- a/apps/web/app/reader/_components/reader-layout-shell.tsx
+++ b/apps/web/app/reader/_components/reader-layout-shell.tsx
@@ -54,10 +54,24 @@ export function ReaderLayoutShell({
   const measureSidebarWidths = useCallback(() => {
     const firstNavigationItem = document.querySelector("[data-sidebar-nav-item]")
     if (!firstNavigationItem) return
+
+    let intrinsicContentWidth = 0
+    for (const child of firstNavigationItem.children) {
+      intrinsicContentWidth += child.getBoundingClientRect().width
+    }
+
+    if (firstNavigationItem.children.length < 2) {
+      intrinsicContentWidth += 28
+    }
+
+    const linkHorizontalPadding = 16
     const navigationContainerPadding = 16
-    const measuredMinimumWidth = firstNavigationItem.scrollWidth + navigationContainerPadding
+    const measuredMinimumWidth = Math.ceil(
+      intrinsicContentWidth + linkHorizontalPadding + navigationContainerPadding
+    )
+
     setSidebarMinimumWidth(`${measuredMinimumWidth}px`)
-    setSidebarDefaultWidth(`${Math.round(measuredMinimumWidth * 1.4)}px`)
+    setSidebarDefaultWidth(`${Math.round(measuredMinimumWidth * 1.5)}px`)
   }, [])
 
   const sidebarLayout = useDefaultLayout({