fix: use string percentages for react-resizable-panels v4 size props

v4 treats numeric size props as pixels, not percentages.
defaultSize={20} was rendering as 20px (~1.9% of viewport).

2 files changed, 56 insertions, 45 deletions

diff --git a/apps/web/app/reader/_components/reader-layout-shell.tsx b/apps/web/app/reader/_components/reader-layout-shell.tsx
index ab2d195..4ccf121 100644
--- a/apps/web/app/reader/_components/reader-layout-shell.tsx
+++ b/apps/web/app/reader/_components/reader-layout-shell.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Suspense, useEffect, useState } from "react"
+import { Group, Panel, Separator } from "react-resizable-panels"
 import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
 import { classNames } from "@/lib/utilities"
 import { useIsMobile } from "@/lib/hooks/use-is-mobile"
@@ -192,51 +193,61 @@ export function ReaderLayoutShell({
           </main>
         </>
       ) : (
-        <>
-          <aside
-            data-panel-zone="sidebar"
-            className={classNames(
-              "flex h-full w-64 shrink-0 flex-col border-r border-border bg-background-secondary transition-all duration-200",
-              isSidebarCollapsed ? "w-0 overflow-hidden border-r-0" : "",
-              focusedPanel === "sidebar" && !isSidebarCollapsed
-                ? "border-r-text-dim"
-                : ""
-            )}
-          >
-            <div className="flex items-center justify-between p-4">
-              <h2 className="text-text-primary">asa.news</h2>
-              <button
-                type="button"
-                onClick={toggleSidebar}
-                className="px-1 py-0.5 text-lg leading-none text-text-dim transition-colors hover:text-text-secondary"
-              >
-                &times;
-              </button>
-            </div>
-            <ErrorBoundary>
-              <Suspense>
-                <SidebarContent />
-              </Suspense>
-            </ErrorBoundary>
-            {sidebarFooter}
-          </aside>
-          <main className="flex-1 overflow-hidden">
-            <div className="flex h-full flex-col">
-              {isSidebarCollapsed && (
-                <div className="flex items-center border-b border-border px-2 py-1">
-                  <button
-                    type="button"
-                    onClick={toggleSidebar}
-                    className="px-2 py-1 text-lg leading-none text-text-secondary transition-colors hover:text-text-primary"
+        <div className="flex-1 overflow-hidden">
+          <Group orientation="horizontal">
+            {!isSidebarCollapsed && (
+              <>
+                <Panel id="sidebar" defaultSize="20%" minSize="15%" maxSize="35%">
+                  <aside
+                    data-panel-zone="sidebar"
+                    className={classNames(
+                      "flex h-full flex-col border-r border-border bg-background-secondary",
+                      focusedPanel === "sidebar"
+                        ? "border-r-text-dim"
+                        : ""
+                    )}
                   >
-                    &#9776;
-                  </button>
+                    <div className="flex items-center justify-between p-4">
+                      <h2 className="text-text-primary">asa.news</h2>
+                      <button
+                        type="button"
+                        onClick={toggleSidebar}
+                        className="px-1 py-0.5 text-lg leading-none text-text-dim transition-colors hover:text-text-secondary"
+                      >
+                        &times;
+                      </button>
+                    </div>
+                    <ErrorBoundary>
+                      <Suspense>
+                        <SidebarContent />
+                      </Suspense>
+                    </ErrorBoundary>
+                    {sidebarFooter}
+                  </aside>
+                </Panel>
+                <Separator className="w-px bg-border transition-colors hover:bg-text-dim" />
+              </>
+            )}
+            <Panel id="main-content">
+              <main className="h-full overflow-hidden">
+                <div className="flex h-full flex-col">
+                  {isSidebarCollapsed && (
+                    <div className="flex items-center border-b border-border px-2 py-1">
+                      <button
+                        type="button"
+                        onClick={toggleSidebar}
+                        className="px-2 py-1 text-lg leading-none text-text-secondary transition-colors hover:text-text-primary"
+                      >
+                        &#9776;
+                      </button>
+                    </div>
+                  )}
+                  <div className="flex-1 overflow-hidden">{children}</div>
                 </div>
-              )}
-              <div className="flex-1 overflow-hidden">{children}</div>
-            </div>
-          </main>
-        </>
+              </main>
+            </Panel>
+          </Group>
+        </div>
       )}
       <CommandPalette />
       <AddFeedDialog />
diff --git a/apps/web/app/reader/_components/reader-shell.tsx b/apps/web/app/reader/_components/reader-shell.tsx
index 58ede9c..5d6bd60 100644
--- a/apps/web/app/reader/_components/reader-shell.tsx
+++ b/apps/web/app/reader/_components/reader-shell.tsx
@@ -192,7 +192,7 @@ export function ReaderShell({
             defaultLayout={detailLayout.defaultLayout}
             onLayoutChanged={detailLayout.onLayoutChanged}
           >
-            <Panel id="entry-list" defaultSize={selectedEntryIdentifier ? 40 : 100} minSize={25}>
+            <Panel id="entry-list" defaultSize={selectedEntryIdentifier ? "40%" : "100%"} minSize="25%">
               <div data-panel-zone="entryList" className={classNames(
                 "h-full",
                 focusedPanel === "entryList" ? "border-t-2 border-t-text-dim" : "border-t-2 border-t-transparent"
@@ -210,7 +210,7 @@ export function ReaderShell({
             {selectedEntryIdentifier && (
               <>
                 <Separator className="w-px bg-border transition-colors hover:bg-text-dim" />
-                <Panel id="detail-panel" defaultSize={60} minSize={30}>
+                <Panel id="detail-panel" defaultSize="60%" minSize="30%">
                   <div data-panel-zone="detailPanel" className={classNames(
                     "h-full overflow-hidden",
                     focusedPanel === "detailPanel" ? "border-t-2 border-t-text-dim" : "border-t-2 border-t-transparent"