diff --git a/apps/web/app/page.spec.tsx b/apps/web/app/page.spec.tsx
index 21151cc..6cf907f 100644
--- a/apps/web/app/page.spec.tsx
+++ b/apps/web/app/page.spec.tsx
@@ -80,7 +80,42 @@ function renderReaderShell(
   );
 }
 
+function countOccurrences(haystack: string, needle: string) {
+  return haystack.split(needle).length - 1;
+}
+
 describe("ArticleReaderShell", () => {
+  it("keeps the reader shell as a fixed overflow-hidden boundary", () => {
+    const html = renderReaderShell(secondArticleDetail, "a-2");
+
+    expect(html).toContain("h-dvh min-h-dvh overflow-hidden");
+    expect(html).toContain("h-[calc(100dvh-1rem-2px)]");
+    expect(html).toContain("sm:h-[calc(100dvh-1.5rem-2px)]");
+  });
+
+  it("renders the shared scroll-area viewport and scrollbar structure", () => {
+    const html = renderReaderShell(secondArticleDetail, "a-2");
+
+    expect(html).toContain('data-slot="scroll-area"');
+    expect(html).toContain('data-slot="scroll-area-viewport"');
+  });
+
+  it("renders dedicated list and detail scroll roots with headers outside the scroll body", () => {
+    const html = renderReaderShell(secondArticleDetail, "a-2");
+
+    expect(html).toContain('data-testid="article-list-scroll-area"');
+    expect(html).toContain('data-testid="article-detail-scroll-area"');
+    expect(countOccurrences(html, 'data-slot="scroll-area"')).toBe(2);
+    expect(html).not.toContain("sm:h-full");
+
+    expect(html.indexOf(">Articles<")).toBeLessThan(
+      html.indexOf('data-testid="article-list-scroll-area"'),
+    );
+    expect(html.indexOf(">Summary view<")).toBeLessThan(
+      html.indexOf('data-testid="article-detail-scroll-area"'),
+    );
+  });
+
   it("renders the selected article detail", () => {
     const html = renderReaderShell(secondArticleDetail, "a-2");
 
@@ -131,13 +166,45 @@ describe("ArticleReaderShell", () => {
     );
 
     expect(html).toContain("Summary pending");
+    expect(html).toContain('data-testid="article-detail-scroll-area"');
   });
+});
 
+describe("ArticleReaderShell placeholder states", () => {
   it("renders the empty state when no articles are available", () => {
     const html = renderReaderShell(null, null, []);
 
+    expect(html).toContain("Summary view");
     expect(html).toContain("No article selected");
     expect(html).toContain("When prepared items are available");
+    expect(html).toContain('data-testid="article-detail-scroll-area"');
+    expect(html).toContain("flex min-h-full flex-col");
+    expect(html).toContain(
+      "mx-auto w-full max-w-5xl flex min-h-full flex-1 flex-col",
+    );
+  });
+
+  it("keeps the detail scroll body for unavailable and failed-summary states", () => {
+    const unavailableHtml = renderReaderShell(null, "a-2");
+    const failedHtml = renderReaderShell(
+      {
+        ...secondArticleDetail,
+        summary: "",
+        summaryErrorReason: "gateway_timeout",
+      },
+      "a-2",
+    );
+
+    expect(unavailableHtml).toContain("Article unavailable");
+    expect(unavailableHtml).toContain(
+      'data-testid="article-detail-scroll-area"',
+    );
+    expect(unavailableHtml).toContain("flex min-h-full flex-col");
+    expect(unavailableHtml).toContain(
+      "mx-auto w-full max-w-5xl flex min-h-full flex-1 flex-col",
+    );
+    expect(failedHtml).toContain("Summary generation failed");
+    expect(failedHtml).toContain('data-testid="article-detail-scroll-area"');
   });
 });
 
diff --git a/apps/web/e2e/home.spec.ts b/apps/web/e2e/home.spec.ts
index 6569813..d182582 100644
--- a/apps/web/e2e/home.spec.ts
+++ b/apps/web/e2e/home.spec.ts
@@ -1,4 +1,8 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Page } from "@playwright/test";
+
+function scrollViewport(testId: string, page: Page) {
+  return page.getByTestId(testId).locator('[data-slot="scroll-area-viewport"]');
+}
 
 test("renders the first article summary by default on desktop", async ({
   page,
@@ -57,3 +61,106 @@ test("shows stale article fallback while keeping the list visible", async ({
     }),
   ).toBeVisible();
 });
+
+test("keeps independent pane scroll roots on desktop overflow", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 240 });
+  await page.goto("/");
+
+  const listViewport = scrollViewport("article-list-scroll-area", page);
+  const detailViewport = scrollViewport("article-detail-scroll-area", page);
+  const listScrollbar = page
+    .getByTestId("article-list-scroll-area")
+    .locator('[data-slot="scroll-area-scrollbar"]');
+  const detailScrollbar = page
+    .getByTestId("article-detail-scroll-area")
+    .locator('[data-slot="scroll-area-scrollbar"]');
+  const listThumb = page
+    .getByTestId("article-list-scroll-area")
+    .locator('[data-slot="scroll-area-thumb"]');
+  const detailThumb = page
+    .getByTestId("article-detail-scroll-area")
+    .locator('[data-slot="scroll-area-thumb"]');
+  const listHeader = page.getByText("Articles");
+  const detailHeader = page.getByText("Summary view");
+
+  await expect(listViewport).toBeVisible();
+  await expect(detailViewport).toBeVisible();
+  await expect(listScrollbar).toHaveCount(1);
+  await expect(detailScrollbar).toHaveCount(1);
+
+  const pageMetrics = await page.evaluate(() => ({
+    clientHeight: document.scrollingElement?.clientHeight ?? 0,
+    scrollHeight: document.scrollingElement?.scrollHeight ?? 0,
+  }));
+  expect(pageMetrics.scrollHeight).toBeLessThanOrEqual(
+    pageMetrics.clientHeight + 1,
+  );
+
+  await expect
+    .poll(() =>
+      listViewport.evaluate(
+        (element) => element.scrollHeight > element.clientHeight,
+      ),
+    )
+    .toBe(true);
+  await expect
+    .poll(() =>
+      detailViewport.evaluate(
+        (element) => element.scrollHeight > element.clientHeight,
+      ),
+    )
+    .toBe(true);
+
+  const listHeaderBefore = await listHeader.boundingBox();
+  const detailHeaderBefore = await detailHeader.boundingBox();
+
+  const listScrollTop = await listViewport.evaluate((element) => {
+    element.scrollTop = 120;
+    return element.scrollTop;
+  });
+  const detailScrollAfterList = await detailViewport.evaluate(
+    (element) => element.scrollTop,
+  );
+
+  expect(listScrollTop).toBeGreaterThan(0);
+  expect(detailScrollAfterList).toBe(0);
+  await expect(listThumb).toBeVisible();
+
+  const detailScrollTop = await detailViewport.evaluate((element) => {
+    element.scrollTop = 160;
+    return element.scrollTop;
+  });
+  const listScrollAfterDetail = await listViewport.evaluate(
+    (element) => element.scrollTop,
+  );
+
+  expect(detailScrollTop).toBeGreaterThan(0);
+  expect(listScrollAfterDetail).toBe(listScrollTop);
+  await expect(detailThumb).toBeVisible();
+
+  const listHeaderAfter = await listHeader.boundingBox();
+  const detailHeaderAfter = await detailHeader.boundingBox();
+
+  expect(listHeaderBefore?.y).toBe(listHeaderAfter?.y);
+  expect(detailHeaderBefore?.y).toBe(detailHeaderAfter?.y);
+});
+
+test("preserves the detail scroll root for pending and unavailable states", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 420 });
+
+  await page.goto("/?articleId=article-002");
+  await expect(page.getByText("Summary pending")).toBeVisible();
+  await expect(
+    scrollViewport("article-detail-scroll-area", page),
+  ).toBeVisible();
+
+  await page.goto("/?articleId=missing-id");
+  await expect(page.getByText("Article unavailable")).toBeVisible();
+  await expect(
+    scrollViewport("article-detail-scroll-area", page),
+  ).toBeVisible();
+});
diff --git a/apps/web/src/widgets/article-reader/ui/article-detail-frame.tsx b/apps/web/src/widgets/article-reader/ui/article-detail-frame.tsx
new file mode 100644
index 0000000..0a90de1
--- /dev/null
+++ b/apps/web/src/widgets/article-reader/ui/article-detail-frame.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+
+import { Button } from "@repo/ui/components/button";
+
+import type { ArticleDetail } from "../api/articles-api";
+
+type ArticleDetailHeaderProps = {
+  article: ArticleDetail | null;
+};
+
+type EmptyStateProps = {
+  title: string;
+  description: string;
+};
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("en", { dateStyle: "medium" }).format(
+    new Date(value),
+  );
+}
+
+export function ArticleDetailHeader({ article }: ArticleDetailHeaderProps) {
+  return (
+    <header className="border-b border-border/80 px-5 py-4 lg:px-7 lg:py-5 xl:px-8">
+      <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-4">
+        <div>
+          <p className="text-reader-eyebrow text-foreground/42 uppercase">
+            Summary view
+          </p>
+          {article ? (
+            <p className="mt-1 text-reader-meta text-foreground/54">
+              {article.sourceTitle} · {formatDate(article.publishedAt)}
+            </p>
+          ) : null}
+        </div>
+        {article ? (
+          <Button asChild className="shrink-0">
+            <Link href={article.originalUrl} target="_blank" rel="noreferrer">
+              Jump to original
+            </Link>
+          </Button>
+        ) : null}
+      </div>
+    </header>
+  );
+}
+
+export function EmptyState({ title, description }: EmptyStateProps) {
+  return (
+    <div className="flex min-h-full items-center justify-center px-8 py-10 lg:px-12 lg:py-12">
+      <div className="max-w-sm text-center">
+        <p className="text-sm font-medium text-foreground/68">{title}</p>
+        <p className="mt-2 text-sm leading-6 text-foreground/54">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/widgets/article-reader/ui/article-detail.tsx b/apps/web/src/widgets/article-reader/ui/article-detail.tsx
index f1487fa..a13b0d4 100644
--- a/apps/web/src/widgets/article-reader/ui/article-detail.tsx
+++ b/apps/web/src/widgets/article-reader/ui/article-detail.tsx
@@ -1,28 +1,19 @@
-import Link from "next/link";
+import type { ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import { Button } from "@repo/ui/components/button";
+import { ScrollArea } from "@repo/ui/components/scroll-area";
 import { Separator } from "@repo/ui/components/separator";
+import { cn } from "@repo/ui/lib/utils";
 
 import type { ArticleDetail } from "../api/articles-api";
+import { ArticleDetailHeader, EmptyState } from "./article-detail-frame";
 
 type ArticleDetailProps = {
   article: ArticleDetail | null;
   isEmpty: boolean;
 };
 
-type EmptyStateProps = {
-  title: string;
-  description: string;
-};
-
-function formatDate(value: string) {
-  return new Intl.DateTimeFormat("en", {
-    dateStyle: "medium",
-  }).format(new Date(value));
-}
-
 function getDisplayTitle(article: ArticleDetail) {
   return article.translatedTitle || article.title;
 }
@@ -43,19 +34,6 @@ function stripSummaryTitleSection(summary: string) {
   return normalized.slice(match[0].length).trimStart();
 }
 
-function EmptyState({ title, description }: EmptyStateProps) {
-  return (
-    <section className="flex min-h-0 flex-1 items-center justify-center px-8 py-10 lg:px-12 lg:py-12">
-      <div className="max-w-sm text-center">
-        <p className="text-sm font-medium text-foreground/68">{title}</p>
-        <p className="mt-2 text-sm leading-6 text-foreground/54">
-          {description}
-        </p>
-      </div>
-    </section>
-  );
-}
-
 function SummaryMarkdownContent({ summary }: { summary: string }) {
   return (
     <ReactMarkdown
@@ -100,59 +78,64 @@ function SummaryFallback({ article }: { article: ArticleDetail }) {
 }
 
 export function ArticleDetailPane({ article, isEmpty }: ArticleDetailProps) {
+  let content: ReactNode;
+  const isPlaceholderState = isEmpty || !article;
+
   if (isEmpty) {
-    return (
+    content = (
       <EmptyState
         title="No article selected"
         description="When prepared items are available, the summary view will appear here."
       />
     );
-  }
-
-  if (!article) {
-    return (
+  } else if (!article) {
+    content = (
       <EmptyState
         title="Article unavailable"
         description="The selected article is no longer available. Choose another one from the list."
       />
     );
+  } else {
+    content = (
+      <div className="mx-auto w-full max-w-5xl">
+        <h1 className="max-w-4xl text-reader-title text-foreground xl:text-reader-title-lg">
+          {getDisplayTitle(article)}
+        </h1>
+        <Separator className="my-5 lg:my-6" />
+        <article className="max-w-4xl text-reader-body text-foreground/80">
+          {article.summary ? (
+            <SummaryMarkdownContent summary={article.summary} />
+          ) : (
+            <SummaryFallback article={article} />
+          )}
+        </article>
+      </div>
+    );
   }
 
   return (
-    <section className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
-      <header className="border-b border-border/80 px-5 py-4 lg:px-7 lg:py-5 xl:px-8">
-        <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-4">
-          <div>
-            <p className="text-reader-eyebrow text-foreground/42 uppercase">
-              Summary view
-            </p>
-            <p className="mt-1 text-reader-meta text-foreground/54">
-              {article.sourceTitle} · {formatDate(article.publishedAt)}
-            </p>
-          </div>
-          <Button asChild className="shrink-0">
-            <Link href={article.originalUrl} target="_blank" rel="noreferrer">
-              Jump to original
-            </Link>
-          </Button>
-        </div>
-      </header>
-
-      <div className="min-h-0 flex-1 overflow-auto px-5 py-5 lg:px-7 lg:py-7 xl:px-8 xl:py-8">
-        <div className="mx-auto w-full max-w-5xl">
-          <h1 className="max-w-4xl text-reader-title text-foreground xl:text-reader-title-lg">
-            {getDisplayTitle(article)}
-          </h1>
-          <Separator className="my-5 lg:my-6" />
-          <article className="max-w-4xl text-reader-body text-foreground/80">
-            {article.summary ? (
-              <SummaryMarkdownContent summary={article.summary} />
-            ) : (
-              <SummaryFallback article={article} />
+    <section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background">
+      <ArticleDetailHeader article={article} />
+      <ScrollArea
+        data-testid="article-detail-scroll-area"
+        className="min-h-0 flex-1"
+      >
+        <div
+          className={cn(
+            "px-5 py-5 lg:px-7 lg:py-7 xl:px-8 xl:py-8",
+            isPlaceholderState && "flex min-h-full flex-col",
+          )}
+        >
+          <div
+            className={cn(
+              "mx-auto w-full max-w-5xl",
+              isPlaceholderState && "flex min-h-full flex-1 flex-col",
             )}
-          </article>
+          >
+            {content}
+          </div>
         </div>
-      </div>
+      </ScrollArea>
     </section>
   );
 }
diff --git a/apps/web/src/widgets/article-reader/ui/article-list.tsx b/apps/web/src/widgets/article-reader/ui/article-list.tsx
index e9291ff..42d87f0 100644
--- a/apps/web/src/widgets/article-reader/ui/article-list.tsx
+++ b/apps/web/src/widgets/article-reader/ui/article-list.tsx
@@ -23,7 +23,7 @@ function getDisplayTitle(article: ArticleListItem) {
 
 export function ArticleList({ articles, selectedArticleId }: ArticleListProps) {
   return (
-    <aside className="flex min-h-0 flex-col border-b border-border/80 bg-card sm:w-64 sm:shrink-0 sm:border-r sm:border-b-0 md:w-72 xl:w-80 2xl:w-96">
+    <aside className="flex min-h-0 flex-col overflow-hidden border-b border-border/80 bg-card sm:w-64 sm:shrink-0 sm:border-r sm:border-b-0 md:w-72 xl:w-80 2xl:w-96">
       <div className="border-b border-border/80 px-4 py-4 lg:px-5 lg:py-5">
         <p className="text-reader-eyebrow text-foreground/42 uppercase">
           Articles
@@ -31,11 +31,14 @@ export function ArticleList({ articles, selectedArticleId }: ArticleListProps) {
       </div>
 
       {articles.length === 0 ? (
-        <div className="px-4 py-6 text-sm leading-6 text-foreground/58 lg:px-5">
+        <div className="min-h-0 flex-1 px-4 py-6 text-sm leading-6 text-foreground/58 lg:px-5">
           No prepared articles yet.
         </div>
       ) : (
-        <ScrollArea className="max-h-[34dvh] sm:h-full sm:max-h-none">
+        <ScrollArea
+          data-testid="article-list-scroll-area"
+          className="max-h-[34dvh] min-h-0 flex-1 sm:max-h-none"
+        >
           <ol className="grid gap-3 p-3 lg:gap-4 lg:p-4">
             {articles.map((article) => {
               const isSelected = article.id === selectedArticleId;
diff --git a/apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx b/apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx
index 642b0a0..43401d5 100644
--- a/apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx
+++ b/apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx
@@ -16,8 +16,8 @@ export function ArticleReaderShell({
   const isEmpty = articles.length === 0;
 
   return (
-    <main className="min-h-dvh bg-background px-2 py-2 text-foreground sm:px-3 sm:py-3 xl:px-4 xl:py-4">
-      <section className="mx-auto flex min-h-[calc(100dvh-1rem)] w-full max-w-none flex-col overflow-hidden rounded-shell border border-border bg-card shadow-reader sm:min-h-[calc(100dvh-1.5rem)] sm:flex-row">
+    <main className="h-dvh min-h-dvh overflow-hidden bg-background px-2 py-2 text-foreground sm:px-3 sm:py-3 xl:px-4 xl:py-4">
+      <section className="mx-auto flex h-[calc(100dvh-1rem-2px)] w-full max-w-none flex-col overflow-hidden rounded-shell border border-border bg-card shadow-reader sm:h-[calc(100dvh-1.5rem-2px)] sm:flex-row">
         <ArticleList
           articles={articles}
           selectedArticleId={selectedArticleId}
diff --git a/docs/en/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md b/docs/en/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md
new file mode 100644
index 0000000..1a8ec2f
--- /dev/null
+++ b/docs/en/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md
@@ -0,0 +1,243 @@
+---
+title: fix: restore independent scrollbars in the reader panes
+type: fix
+status: completed
+date: 2026-04-19
+origin:
+  - docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md
+  - docs/zh-Hans/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md
+---
+
+# fix: restore independent scrollbars in the reader panes
+
+## Overview
+
+This plan fixes a regression in the desktop reader shell: both panes should scroll independently with visible scrollbars, but the current height/overflow chain leaves the list pane fragile and the detail pane reliant on native page-style scrolling behavior. The change stays inside `apps/web` plus the shared `ScrollArea` primitive, preserves the current URL-driven read flow, and adds browser coverage for real overflow behavior.
+
+## Problem Frame
+
+The user report and screenshot show the current dual-pane reader lacks discoverable per-pane scrollbars, even though the product contract remains desktop-first and dual-pane (see origin: `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md`). Current repo facts that shape the fix:
+
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` already defines a fixed-height shell with `overflow-hidden`, so scroll ownership should live inside the panes rather than on the page.
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx` already uses `ScrollArea`, but it relies on `sm:h-full` instead of an explicit flex-owned scroll body, which makes the height chain easy to break.
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx` still uses native `overflow-auto`, which keeps the two panes asymmetric and does not guarantee a visible scrollbar surface consistent with the left pane.
+- `packages/ui/src/components/scroll-area.tsx` is only used by the reader list today, so tightening its visibility/contract has low blast radius.
+- `apps/web/app/page.spec.tsx` and `apps/web/e2e/home.spec.ts` currently prove rendering and navigation, but they do not yet prove real overflow or independent pane scrolling.
+
+## Requirements Trace
+
+- R1. On desktop, the left article rail and right summary pane each own vertical scrolling inside the reader shell; the page itself is not the primary scroll container.
+- R2. When content overflows, both panes expose a discoverable vertical scrollbar rather than relying on OS-level hidden native-scrollbar behavior.
+- R3. Pane headers stay fixed while pane bodies scroll.
+- R4. URL-driven selection, empty/unavailable states, and the current read-only API contract remain unchanged.
+- R5. Preserve the desktop-first dual-pane experience from the origin requirements; do not turn this fix into a mobile redesign or a layout rewrite.
+- R6. Add regression coverage that proves the independent-scroll behavior with real overflow content.
+
+## Scope Boundaries
+
+- No redesign of article cards, markdown typography, or general visual refresh.
+- No API contract, data-loading, or route changes.
+- No mobile-specific adaptation beyond keeping current behavior intact.
+- No new shared layout abstraction unless implementation discovers duplication that cannot stay local to the reader widget.
+- No browser-specific scrollbar polyfill beyond the existing Radix `ScrollArea` primitive.
+
+## Context & Research
+
+### Relevant Code and Patterns
+
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` already establishes the fixed-height shell boundary with `overflow-hidden`.
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx` shows the current left-pane `ScrollArea` usage and the fragile `sm:h-full` height assumption.
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx` already splits header and body, but the body uses native `overflow-auto` rather than the shared scrollbar primitive.
+- `packages/ui/src/components/scroll-area.tsx` is the current shared scrollbar primitive and is only used by the reader list today.
+- `apps/web/app/page.spec.tsx` covers server-rendered reader structure and fallback states.
+- `apps/web/e2e/home.spec.ts` covers browser navigation but does not yet assert overflow or independent pane scrolling.
+
+### Institutional Learnings
+
+- `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md` and `docs/zh-Hans/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md` already set the expectation that long titles and long summaries must remain readable through scrolling without collapsing the two-pane layout.
+- `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md` and its Chinese pair keep the desktop dual-pane reader as the primary UX, so this regression fix should reinforce that contract rather than change it.
+
+### External References
+
+- None. The repo already has strong local patterns for the reader shell, the shared `ScrollArea`, and Playwright/Jest coverage.
+
+## Key Technical Decisions
+
+- Keep scroll ownership inside the reader panes rather than allowing page-level scrolling to paper over the bug; this matches the existing fixed-shell design.
+- Standardize both pane bodies on the shared `ScrollArea` contract so visible scrollbar behavior no longer depends on native OS scrollbar settings.
+- Make the scrollable region explicit in the flex chain (`overflow-hidden` on pane shells and `min-h-0 flex-1` on pane bodies) instead of relying on `h-full` to infer height.
+- Keep the fix local to the reader widget and the shared primitive; avoid new layout abstractions or route/client-state changes.
+- Add browser-level overflow assertions, because SSR markup tests alone cannot prove independent scroll behavior.
+
+## Open Questions
+
+### Resolved During Planning
+
+- **Should this be solved by letting the whole page scroll again?** No. The shell already declares a fixed-height reading surface; the panes should own scrolling.
+- **Should the detail pane keep native `overflow-auto`?** No. Use the same `ScrollArea` contract on both panes so scrollbar visibility and behavior stay consistent.
+- **Does this require a new shared reader-specific wrapper component?** No. `packages/ui/src/components/scroll-area.tsx` is already the right abstraction surface; keep any extra class hooks minimal.
+
+### Deferred to Implementation
+
+- The exact scrollbar thumb/track contrast can be tuned during implementation if screenshot validation shows the current token values remain too subtle after the layout fix.
+- Whether Playwright needs `data-testid`, `aria-label`, or another stable hook on the pane scroll roots can be decided during implementation once the final DOM shape is settled.
+
+## High-Level Technical Design
+
+> _This illustrates the intended approach and is directional guidance for review, not implementation specification. The implementing agent should treat it as context, not code to reproduce._
+
+```text
+ReaderShell (fixed-height, overflow-hidden)
+├─ ArticleListPane (min-h-0 flex-col overflow-hidden)
+│  ├─ Header (fixed)
+│  └─ ScrollArea (flex-1 min-h-0) -> article cards
+└─ ArticleDetailPane (min-h-0 flex-col overflow-hidden)
+   ├─ Header (fixed)
+   └─ ScrollArea (flex-1 min-h-0) -> title + markdown summary + fallback states
+```
+
+## Implementation Units
+
+- [x] **Unit 1: Tighten the shared scroll contract at the shell boundary**
+
+**Goal:** Give the reader a stable scroll contract at the shell level so pane shells clip correctly and the shared `ScrollArea` can serve as an explicit scroll root.
+
+**Requirements:** R1, R2, R3, R5
+
+**Dependencies:** None
+
+**Files:**
+
+- Modify: `packages/ui/src/components/scroll-area.tsx`
+- Modify: `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`
+- Test: `apps/web/app/page.spec.tsx`
+
+**Approach:**
+
+- Tighten `ScrollArea` so it can act as the reader's explicit scroll root without depending on ambient height quirks.
+- Keep the outer reader shell as the fixed-height boundary and ensure it continues to reject page-level overflow.
+- Expose only the minimum class-level flexibility needed for the pane components to opt into `min-h-0 flex-1` scroll bodies.
+
+**Patterns to follow:**
+
+- `packages/ui/src/components/scroll-area.tsx`
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`
+- `apps/web/app/page.spec.tsx`
+
+**Test scenarios:**
+
+- Happy path — the server-rendered shell keeps a fixed-height reader boundary rather than reintroducing page-level overflow ownership.
+- Happy path — the shared `ScrollArea` markup still renders a viewport plus scrollbar structure when used inside the reader shell.
+- Edge case — the shell structure remains valid when there is no selected detail or no available articles.
+- Integration — tightening the shell contract does not change the current `articleId` navigation markup or detail rendering seams.
+
+**Verification:**
+
+- The shared primitive can host a visible scrollbar inside a fixed-height flex shell, and the reader no longer depends on accidental page scrolling to reveal overflow.
+
+- [x] **Unit 2: Move both reader panes onto the same fixed-header plus scroll-body pattern**
+
+**Goal:** Ensure the article list and summary detail panes both keep fixed chrome while their content scrolls independently.
+
+**Requirements:** R1, R2, R3, R4, R6
+
+**Dependencies:** Unit 1
+
+**Files:**
+
+- Modify: `apps/web/src/widgets/article-reader/ui/article-list.tsx`
+- Modify: `apps/web/src/widgets/article-reader/ui/article-detail.tsx`
+- Test: `apps/web/app/page.spec.tsx`
+
+**Approach:**
+
+- Replace the left-pane `sm:h-full` reliance with an explicit flex-owned scroll body.
+- Route the detail pane through the same shared scroll primitive and padding model while preserving the current Markdown rendering and fallback states.
+- Keep list cards, title rendering, and detail content semantics unchanged; this unit only normalizes scroll ownership and scrollbar visibility.
+
+**Patterns to follow:**
+
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx`
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx`
+- `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`
+
+**Test scenarios:**
+
+- Happy path — the reader markup exposes one scroll body for the article list and one scroll body for the detail pane.
+- Happy path — list and detail headers remain outside their respective scroll bodies so they stay fixed during scrolling.
+- Edge case — empty, unavailable, pending, and error detail states all keep the detail scroll body mounted and correctly sized.
+- Integration — long list content and long summary content remain inside their own panes instead of stretching the shell height.
+
+**Verification:**
+
+- Both panes share the same height/overflow contract in code, and neither pane falls back to page-level scrolling when content grows.
+
+- [x] **Unit 3: Add browser regressions for independent pane scrolling**
+
+**Goal:** Catch future regressions where one pane stops scrolling, page scroll returns, or a pane loses its own scrollbar.
+
+**Requirements:** R4, R6
+
+**Dependencies:** Unit 1, Unit 2
+
+**Files:**
+
+- Modify: `apps/web/e2e/home.spec.ts`
+- Modify: `apps/web/app/page.spec.tsx`
+- Test: `apps/web/e2e/home.spec.ts`
+
+**Approach:**
+
+- Extend browser coverage with stable selectors for the list and detail scroll roots.
+- Use deterministic long-content fixtures or seeded records to assert `scrollHeight > clientHeight` and verify each pane can change `scrollTop` independently.
+- Keep SSR/spec coverage focused on structural hooks; leave real scrolling proof to Playwright.
+
+**Execution note:** The implementing agent must use the `agent-browser` skill for post-change browser validation. Capture screenshots that show the left pane scrollbar and right pane scrollbar independently, and use browser interaction to verify that each pane scrolls while its header stays fixed.
+
+**Patterns to follow:**
+
+- `apps/web/e2e/home.spec.ts`
+- `apps/web/app/page.spec.tsx`
+- `apps/web/README.md`
+
+**Test scenarios:**
+
+- Happy path — on desktop, both the article list scroll root and the detail scroll root are present and vertically overflow.
+- Happy path — scrolling the list pane changes only the list scroll position, and scrolling the detail pane changes only the detail scroll position.
+- Edge case — a missing article detail still leaves the list pane scrollable and the detail pane structurally intact.
+- Error path — a pending or failed summary state does not remove the detail scroll root.
+- Integration — refreshing after selecting another article preserves the same detail content and the same dual-pane scroll structure.
+
+**Verification:**
+
+- Browser coverage fails if the app falls back to page-level scrolling or if either pane loses its own scroll root.
+- `agent-browser` validation produces screenshots proving that both panes expose independent scrollbars after the fix.
+- `agent-browser` interaction confirms that scrolling the left pane does not scroll the right pane, scrolling the right pane does not scroll the left pane, and both pane headers remain fixed while their bodies move.
+
+## System-Wide Impact
+
+- **Interaction graph:** `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` defines the height boundary; `apps/web/src/widgets/article-reader/ui/article-list.tsx` and `apps/web/src/widgets/article-reader/ui/article-detail.tsx` consume that boundary; `packages/ui/src/components/scroll-area.tsx` provides the shared scroll surface.
+- **Error propagation:** No API or data error semantics change; failures here manifest as layout regressions rather than contract or persistence failures.
+- **State lifecycle risks:** Empty, unavailable, pending, and error detail states must keep the same scroll-root structure so state changes do not silently reintroduce broken height propagation.
+- **API surface parity:** None. `apps/web/src/widgets/article-reader/api/articles-api.ts` and the API payload shape stay unchanged.
+- **Integration coverage:** Only browser tests can prove real overflow, independent scroll positions, and the absence of page-level fallback scrolling.
+- **Unchanged invariants:** URL-driven `articleId` selection, server-fetched page rendering, markdown summary rendering, and the external `Jump to original` action all stay as they are.
+
+## Risks & Dependencies
+
+| Risk                                                                                     | Mitigation                                                                                                                               |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| The right-pane scrollbar may still feel visually too subtle after the layout fix.        | Keep tuning localized to `packages/ui/src/components/scroll-area.tsx` and validate with screenshot/browser checks during implementation. |
+| Scroll assertions can become flaky if the fixture content is not tall enough.            | Use deterministic long-content fixtures or seeded records and assert both overflow metrics and scroll-position changes.                  |
+| Tightening pane overflow classes could accidentally clip fallback states or focus rings. | Keep padding inside the scroll viewport and include empty, unavailable, pending, and error states in the regression scenarios.           |
+
+## Documentation / Operational Notes
+
+- No API docs, environment docs, or rollout notes change for this fix.
+- If implementation adds stable test hooks on the pane scroll roots, keep them local to the reader components and avoid repo-wide testing convention changes.
+
+## Sources & References
+
+- **Origin documents:** `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md` + `docs/zh-Hans/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md`
+- Related plans: `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`, `docs/zh-Hans/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`, `docs/en/plans/2026-04-18-001-feat-v0-1-llm-summary-reader-plan.md`, `docs/zh-Hans/plans/2026-04-18-001-feat-v0-1-llm-summary-reader-plan.md`
+- Related code: `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`, `apps/web/src/widgets/article-reader/ui/article-list.tsx`, `apps/web/src/widgets/article-reader/ui/article-detail.tsx`, `packages/ui/src/components/scroll-area.tsx`, `apps/web/app/page.spec.tsx`, `apps/web/e2e/home.spec.ts`
diff --git a/docs/en/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md b/docs/en/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md
new file mode 100644
index 0000000..a944006
--- /dev/null
+++ b/docs/en/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md
@@ -0,0 +1,131 @@
+---
+title: Reader pane scrollbars need pane-owned scroll roots and full-height placeholders
+date: 2026-04-19
+category: ui-bugs
+module: article reader
+problem_type: ui_bug
+component: react_component
+symptoms:
+  - the desktop reader could fall back toward page-level scrolling instead of keeping the article list and detail panes independently scrollable
+  - the left pane depended on a fragile `sm:h-full` height chain, while the right pane still used native `overflow-auto`, so scrollbar behavior was asymmetric and hard to discover
+  - after the detail pane moved into the shared scroll wrapper, empty and unavailable states could lose vertical centering unless the placeholder path also kept a full-height flex chain
+root_cause: scope_issue
+resolution_type: code_fix
+severity: medium
+related_components:
+  - next_page
+  - testing_framework
+tags:
+  [
+    article-reader,
+    dual-pane,
+    scroll-area,
+    scrollbar,
+    overflow,
+    placeholder-state,
+    flex-height-chain,
+  ]
+---
+
+# Reader pane scrollbars need pane-owned scroll roots and full-height placeholders
+
+## Problem
+
+The desktop reader is designed as a fixed-height dual-pane surface, but the original height and overflow chain let scrolling drift away from the panes themselves. The list pane depended on an ambient height assumption, the detail pane used native `overflow-auto`, and the later detail refactor showed that placeholder states also needed the same full-height contract as real article content.
+
+## Symptoms
+
+- On desktop, the page could become the effective scroll container instead of the list pane and detail pane owning scroll independently.
+- The two panes did not share the same scrollbar contract, so the list pane and detail pane behaved differently under overflow.
+- Empty or unavailable detail states risked sitting inside a scroll wrapper without enough height context to stay vertically centered.
+
+## What Didn't Work
+
+- Leaving the detail pane on native `overflow-auto` while the list pane used the shared `ScrollArea` kept behavior asymmetric and made scrollbar visibility depend on OS/browser defaults.
+- Relying on `sm:h-full` inside the list pane did not create a reliable height chain in a fixed shell; it only worked when ancestor sizing happened to line up.
+- Moving placeholder content under the new scroll wrapper without also restoring a `min-h-full` + `flex-1` chain would keep the scroll root but break the previous centered empty-state layout.
+
+## Solution
+
+Make the reader shell and both panes explicit about scroll ownership, then preserve the same height contract for placeholder states.
+
+The shell now owns a fixed viewport boundary, and the shared primitive is a flex-owned scroll root with stable structural hooks:
+
+```tsx
+<main className="h-dvh min-h-dvh overflow-hidden ...">
+  <section className="... h-[calc(100dvh-1rem-2px)] ... overflow-hidden ...">
+    <ArticleList ... />
+    <ArticleDetailPane ... />
+  </section>
+</main>
+```
+
+```tsx
+const ScrollArea = React.forwardRef(
+  ...({ className, children, type = "always", ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      type={type}
+      className={cn(
+        "group/scroll-area relative flex min-h-0 flex-col overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="min-h-0 w-full flex-1 rounded-[inherit]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+    </ScrollAreaPrimitive.Root>
+  ),
+);
+```
+
+The detail pane now uses the same shared scroll root as the list pane, and placeholder states keep a full-height flex chain so centering survives the refactor:
+
+```tsx
+<ScrollArea data-testid="article-detail-scroll-area" className="min-h-0 flex-1">
+  <div
+    className={cn(
+      "px-5 py-5 lg:px-7 lg:py-7 xl:px-8 xl:py-8",
+      isPlaceholderState && "flex min-h-full flex-col",
+    )}
+  >
+    <div
+      className={cn(
+        "mx-auto w-full max-w-5xl",
+        isPlaceholderState && "flex min-h-full flex-1 flex-col",
+      )}
+    >
+      {content}
+    </div>
+  </div>
+</ScrollArea>
+```
+
+Verification was split across SSR and browser tests:
+
+- `apps/web/app/page.spec.tsx` asserts the fixed shell classes, the two scroll roots, and the placeholder-state full-height wrappers.
+- `apps/web/e2e/home.spec.ts` proves `scrollHeight > clientHeight`, independent `scrollTop` changes for each pane, stable headers during pane scrolling, and preserved detail scroll roots for pending and unavailable states.
+
+## Why This Works
+
+The bug was not a single missing class; it was a broken ownership boundary. The shell is supposed to be a clipped reading surface, so the panes must own overflow explicitly. Once both panes use the same `ScrollArea` contract and their bodies opt into `min-h-0 flex-1`, the browser no longer needs to guess where scrolling belongs. The follow-up placeholder fix works for the same reason: empty and unavailable states now inherit the same full-height flex chain as the normal detail body, so layout does not collapse when content is replaced by a centered fallback.
+
+## Prevention
+
+- In fixed-height reader or dashboard layouts, keep headers outside the scroll body and make the pane body the explicit scroll root.
+- Do not rely on `h-full` alone inside nested flex shells; preserve the full `overflow-hidden` -> `min-h-0` -> `flex-1` chain from shell to viewport to content wrapper.
+- When moving empty, pending, or unavailable states under a shared scroll wrapper, preserve their full-height layout path and add assertions for the wrapper classes that centering depends on.
+- Keep stable scroll-root selectors such as `data-testid="article-list-scroll-area"` and `data-slot="scroll-area-viewport"` so browser tests can verify real overflow behavior instead of only markup.
+
+## Related Issues
+
+- Paired implementation plans:
+  - `docs/en/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md`
+  - `docs/zh-Hans/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md`
+- Related learning: `docs/en/solutions/logic-errors/article-summary-retryable-failures-must-not-clear-existing-summary-2026-04-18.md` — the reader should keep a stable visible structure even when summary content is pending or unavailable.
+- GitHub issue search via `gh issue list --search "reader scrollbar article detail scroll" --state all --limit 5` returned no related issues.
diff --git a/docs/zh-Hans/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md b/docs/zh-Hans/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md
new file mode 100644
index 0000000..bac302a
--- /dev/null
+++ b/docs/zh-Hans/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md
@@ -0,0 +1,243 @@
+---
+title: fix: 恢复 reader 双栏的独立滚动条
+type: fix
+status: completed
+date: 2026-04-19
+origin:
+  - docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md
+  - docs/zh-Hans/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md
+---
+
+# fix: 恢复 reader 双栏的独立滚动条
+
+## Overview
+
+本计划用于修复 desktop reader shell 的一个可用性回归：左右两栏本应各自滚动并带有可发现的滚动条，但当前高度/overflow 链路让左栏滚动高度脆弱、右栏又退回到更像页面原生滚动的行为。改动收口在 `apps/web` 与共享的 `ScrollArea` primitive 内，保持现有 URL 驱动的阅读流，并补上针对真实 overflow 行为的浏览器回归覆盖。
+
+## Problem Frame
+
+用户反馈与截图都表明，当前双栏 reader 缺少可发现的栏内滚动条，但产品合同仍然是 desktop-first、dual-pane（见 origin: `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md`）。影响本次修复的仓库现状如下：
+
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` 已经把外层 shell 定义成固定高度并带 `overflow-hidden`，所以滚动所有权应落在 pane 内部，而不是页面本身。
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx` 虽然已经使用 `ScrollArea`，但它依赖 `sm:h-full`，而不是显式由 flex 接管的 scroll body，因此高度链路很容易失效。
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx` 仍使用原生 `overflow-auto`，导致左右两栏滚动策略不对称，也无法保证和左栏一致的可见滚动条表面。
+- `packages/ui/src/components/scroll-area.tsx` 目前只被 reader list 使用，因此收紧它的可见性/契约，blast radius 很小。
+- `apps/web/app/page.spec.tsx` 与 `apps/web/e2e/home.spec.ts` 目前只证明了渲染与导航，还没有证明真实 overflow 或双栏独立滚动。
+
+## Requirements Trace
+
+- R1. 在 desktop 下，左侧文章栏与右侧摘要栏都必须在 reader shell 内部各自拥有纵向滚动；页面本身不能成为主要滚动容器。
+- R2. 当内容溢出时，两栏都必须暴露可发现的纵向滚动条，而不是依赖操作系统层面可能隐藏的原生滚动条行为。
+- R3. 两栏 header 保持固定，真正滚动的是各自的 body。
+- R4. URL 驱动的选择、empty/unavailable state，以及当前只读 API 合同都保持不变。
+- R5. 保留 origin requirements 里的 desktop-first dual-pane 体验；不把这次修复扩张成移动端改造或布局重写。
+- R6. 增加能证明双栏独立滚动的回归覆盖，并使用真实 overflow 内容验证。
+
+## Scope Boundaries
+
+- 不重做文章卡片、Markdown 排版或整体视觉刷新。
+- 不改 API 合同、取数方式或路由。
+- 不做任何移动端专项适配，只要求当前行为不被破坏。
+- 除非实施中发现无法局部消化的重复，否则不新增 reader 专属共享布局抽象。
+- 不引入新的浏览器滚动条 polyfill，继续只使用现有 Radix `ScrollArea` primitive。
+
+## Context & Research
+
+### Relevant Code and Patterns
+
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` 已经建立了固定高度的 shell 边界，并通过 `overflow-hidden` 阻止整页滚动兜底。
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx` 展示了当前左栏 `ScrollArea` 的用法，以及脆弱的 `sm:h-full` 高度假设。
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx` 已经拆成 header + body，但 body 仍然使用原生 `overflow-auto`，而不是共享滚动条 primitive。
+- `packages/ui/src/components/scroll-area.tsx` 是当前共享滚动条 primitive，并且现在只在 reader list 中使用。
+- `apps/web/app/page.spec.tsx` 覆盖了服务端渲染结构与 fallback state。
+- `apps/web/e2e/home.spec.ts` 覆盖了浏览器级导航，但还没有断言 overflow 或双栏独立滚动。
+
+### Institutional Learnings
+
+- `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md` 与 `docs/zh-Hans/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md` 已经明确：长标题与长摘要必须通过滚动保持可读，而不是把双栏布局压坏。
+- `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md` 及其中译配对文档继续把 desktop dual-pane reader 视为主 UX，因此这次回归修复应当强化该合同，而不是改写它。
+
+### External References
+
+- 无。当前仓库对 reader shell、共享 `ScrollArea`、以及 Playwright/Jest 覆盖都已经有足够强的本地模式，无需额外外部调研。
+
+## Key Technical Decisions
+
+- 保持滚动所有权在 reader 两栏内部，而不是让页面级滚动重新兜底；这与当前 fixed-shell 设计一致。
+- 让两栏 body 都收敛到共享的 `ScrollArea` 契约上，避免滚动条是否可见继续依赖原生操作系统滚动条设置。
+- 在 flex 链路里显式表达滚动区域（pane shell 用 `overflow-hidden`，pane body 用 `min-h-0 flex-1`），而不是继续依赖 `h-full` 去“猜”高度。
+- 把修复收口在 reader widget 与共享 primitive 内，不引入新布局抽象，也不改 route/client-state。
+- 增加浏览器级 overflow 断言，因为 SSR markup test 本身无法证明真实独立滚动。
+
+## Open Questions
+
+### Resolved During Planning
+
+- **是不是把整页滚动重新放开就能解决？** 不是。shell 已经定义成固定高度阅读面，滚动应属于 pane，而不是页面。
+- **右栏还继续保留原生 `overflow-auto` 吗？** 不保留。左右两栏都要走同一套 `ScrollArea` 契约，才能保证滚动条可见性和行为一致。
+- **需要额外做一个 reader 专属的 shared wrapper 吗？** 不需要。`packages/ui/src/components/scroll-area.tsx` 已经是正确的抽象面；额外 hook 只保留最小必需量。
+
+### Deferred to Implementation
+
+- 如果布局修复后滚动条 thumb/track 对比度仍然太弱，具体色值可在 implementation 里通过截图校验再做微调。
+- Playwright 最终使用 `data-testid`、`aria-label` 还是其他稳定 hook 来定位 pane scroll root，可在 implementation 看到最终 DOM 形状后再定。
+
+## High-Level Technical Design
+
+> _This illustrates the intended approach and is directional guidance for review, not implementation specification. The implementing agent should treat it as context, not code to reproduce._
+
+```text
+ReaderShell (fixed-height, overflow-hidden)
+├─ ArticleListPane (min-h-0 flex-col overflow-hidden)
+│  ├─ Header (fixed)
+│  └─ ScrollArea (flex-1 min-h-0) -> article cards
+└─ ArticleDetailPane (min-h-0 flex-col overflow-hidden)
+   ├─ Header (fixed)
+   └─ ScrollArea (flex-1 min-h-0) -> title + markdown summary + fallback states
+```
+
+## Implementation Units
+
+- [x] **Unit 1: 在 shell 边界收紧共享滚动契约**
+
+**Goal:** 先在 shell 级别建立稳定的滚动契约，让 pane shell 能正确裁剪，且共享 `ScrollArea` 能作为明确的 scroll root 使用。
+
+**Requirements:** R1, R2, R3, R5
+
+**Dependencies:** None
+
+**Files:**
+
+- Modify: `packages/ui/src/components/scroll-area.tsx`
+- Modify: `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`
+- Test: `apps/web/app/page.spec.tsx`
+
+**Approach:**
+
+- 收紧 `ScrollArea`，让它可以在 reader 里充当明确 scroll root，而不是继续依赖环境高度碰巧对齐。
+- 保持外层 reader shell 继续是固定高度边界，并确保它仍然拒绝页面级 overflow 兜底。
+- 只暴露 pane 组件接入 `min-h-0 flex-1` scroll body 所需的最小 class 级灵活性，不顺手扩张 primitive 能力面。
+
+**Patterns to follow:**
+
+- `packages/ui/src/components/scroll-area.tsx`
+- `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`
+- `apps/web/app/page.spec.tsx`
+
+**Test scenarios:**
+
+- Happy path — 服务端渲染出的 shell 继续保持固定高度 reader 边界，而不是重新把页面级 overflow 当主滚动所有权。
+- Happy path — 共享 `ScrollArea` 在 reader shell 内仍然会渲染 viewport 与 scrollbar 结构。
+- Edge case — 当没有选中文章或没有任何文章时，shell 结构仍然有效。
+- Integration — 收紧 shell 契约后，不改变现有 `articleId` 导航 markup 与 detail 渲染 seam。
+
+**Verification:**
+
+- 共享 primitive 已经能在固定高度 flex shell 里承载可见滚动条，reader 不再依赖“页面碰巧能滚”来暴露 overflow。
+
+- [x] **Unit 2: 让左右两栏都切到同一套 fixed-header + scroll-body 模式**
+
+**Goal:** 让文章列表栏与摘要详情栏都保持固定 chrome，而内容部分各自独立滚动。
+
+**Requirements:** R1, R2, R3, R4, R6
+
+**Dependencies:** Unit 1
+
+**Files:**
+
+- Modify: `apps/web/src/widgets/article-reader/ui/article-list.tsx`
+- Modify: `apps/web/src/widgets/article-reader/ui/article-detail.tsx`
+- Test: `apps/web/app/page.spec.tsx`
+
+**Approach:**
+
+- 去掉左栏对 `sm:h-full` 的依赖，改成显式由 flex 接管的 scroll body。
+- 右栏接入同一套共享滚动条 primitive 与 padding 模式，同时保留现有 Markdown 渲染与 fallback state。
+- 不改变 list card、标题展示或 detail 内容语义；本单元只统一滚动所有权与滚动条可见性。
+
+**Patterns to follow:**
+
+- `apps/web/src/widgets/article-reader/ui/article-list.tsx`
+- `apps/web/src/widgets/article-reader/ui/article-detail.tsx`
+- `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`
+
+**Test scenarios:**
+
+- Happy path — reader markup 明确暴露一个 list scroll body 和一个 detail scroll body。
+- Happy path — list 与 detail 的 header 都位于各自 scroll body 之外，因此滚动时保持固定。
+- Edge case — empty、unavailable、pending、error 四类 detail state 都继续保留 detail scroll body，且高度正确。
+- Integration — 长列表内容与长摘要内容都继续待在各自 pane 内，而不是把 shell 高度整体撑开。
+
+**Verification:**
+
+- 左右两栏在代码层面已经共享同一套高度/overflow 契约，内容增长时不再回退到页面级滚动。
+
+- [x] **Unit 3: 增加双栏独立滚动的浏览器回归覆盖**
+
+**Goal:** 让未来一旦出现“某一栏不能滚”“页面滚动回来了”或“某栏滚动条又消失”的回归时，测试能直接拦住。
+
+**Requirements:** R4, R6
+
+**Dependencies:** Unit 1, Unit 2
+
+**Files:**
+
+- Modify: `apps/web/e2e/home.spec.ts`
+- Modify: `apps/web/app/page.spec.tsx`
+- Test: `apps/web/e2e/home.spec.ts`
+
+**Approach:**
+
+- 给 list 与 detail scroll root 增加稳定 selector，并把浏览器覆盖扩展到这两个滚动容器。
+- 使用确定性的长内容 fixture 或 seed 数据，断言 `scrollHeight > clientHeight`，并验证两个 pane 的 `scrollTop` 能各自独立变化。
+- SSR/spec 覆盖只负责结构 hook；真实滚动能力由 Playwright 证明。
+
+**Execution note:** 实施 agent 必须使用 `agent-browser` skill 做变更后的浏览器级验证，并截图证明左栏滚动条与右栏滚动条都独立存在；同时要通过实际滚动操作确认每一栏滚动时自己的 header 保持固定。
+
+**Patterns to follow:**
+
+- `apps/web/e2e/home.spec.ts`
+- `apps/web/app/page.spec.tsx`
+- `apps/web/README.md`
+
+**Test scenarios:**
+
+- Happy path — desktop 下 list scroll root 与 detail scroll root 都存在，并且都发生纵向 overflow。
+- Happy path — 滚动 list pane 只改变 list 的滚动位置；滚动 detail pane 只改变 detail 的滚动位置。
+- Edge case — 缺失文章 detail 时，list pane 仍然可滚，detail pane 结构仍然完整。
+- Error path — summary pending 或 summary failed 状态不会把 detail scroll root 移除。
+- Integration — 切换到另一篇文章并刷新后，detail 内容与双栏滚动结构都保持稳定。
+
+**Verification:**
+
+- 一旦应用退回页面级滚动，或者任一 pane 失去自己的 scroll root，浏览器覆盖就会失败。
+- `agent-browser` 验证必须产出截图，证明修复后左右两栏都暴露独立滚动条。
+- `agent-browser` 交互必须确认：滚动左栏不会带动右栏，滚动右栏不会带动左栏，且两栏都是 header 固定、body 滚动。
+
+## System-Wide Impact
+
+- **Interaction graph:** `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx` 定义高度边界；`apps/web/src/widgets/article-reader/ui/article-list.tsx` 与 `apps/web/src/widgets/article-reader/ui/article-detail.tsx` 消费该边界；`packages/ui/src/components/scroll-area.tsx` 提供共享滚动表面。
+- **Error propagation:** 不改变任何 API 或数据错误语义；这里的失败表现为布局回归，而不是合同或持久化故障。
+- **State lifecycle risks:** empty、unavailable、pending、error 等 detail 状态切换时，必须保持同一套 scroll-root 结构，避免状态变化悄悄把高度链路弄坏。
+- **API surface parity:** 无。`apps/web/src/widgets/article-reader/api/articles-api.ts` 与 API payload shape 都保持不变。
+- **Integration coverage:** 只有浏览器测试才能证明真实 overflow、双栏独立滚动位置、以及页面级滚动兜底没有回归。
+- **Unchanged invariants:** URL 驱动的 `articleId` 选择、服务端取数页面、Markdown 摘要渲染、以及外跳的 `Jump to original` 行为都保持不变。
+
+## Risks & Dependencies
+
+| Risk                                                                 | Mitigation                                                                                                   |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| 右栏滚动条在布局修复后仍然显得过于隐蔽。                             | 把调优局限在 `packages/ui/src/components/scroll-area.tsx`，并在 implementation 阶段结合截图/浏览器检查验证。 |
+| 如果 fixture 内容不够长，滚动断言可能变得脆弱。                      | 使用确定性的长内容 fixture 或 seed 数据，并同时断言 overflow 指标与 scroll position 变化。                   |
+| 收紧 pane overflow class 可能意外裁掉 fallback state 或 focus ring。 | 保持 padding 在 scroll viewport 内，并把 empty、unavailable、pending、error 状态都纳入回归场景。             |
+
+## Documentation / Operational Notes
+
+- 本次修复不改变 API 文档、环境文档或 rollout 说明。
+- 如果 implementation 为 pane scroll root 增加稳定测试 hook，应把它们限制在 reader 组件内，不扩张成仓库级测试约定变更。
+
+## Sources & References
+
+- **Origin documents:** `docs/en/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md` + `docs/zh-Hans/brainstorms/2026-04-18-v0-1-slice-4-llm-summary-reader-requirements.md`
+- Related plans: `docs/en/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`, `docs/zh-Hans/plans/2026-04-10-001-feat-first-vertical-slice-read-path-plan.md`, `docs/en/plans/2026-04-18-001-feat-v0-1-llm-summary-reader-plan.md`, `docs/zh-Hans/plans/2026-04-18-001-feat-v0-1-llm-summary-reader-plan.md`
+- Related code: `apps/web/src/widgets/article-reader/ui/article-reader-shell.tsx`, `apps/web/src/widgets/article-reader/ui/article-list.tsx`, `apps/web/src/widgets/article-reader/ui/article-detail.tsx`, `packages/ui/src/components/scroll-area.tsx`, `apps/web/app/page.spec.tsx`, `apps/web/e2e/home.spec.ts`
diff --git a/docs/zh-Hans/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md b/docs/zh-Hans/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md
new file mode 100644
index 0000000..41b1dd4
--- /dev/null
+++ b/docs/zh-Hans/solutions/ui-bugs/reader-pane-scrollbars-need-pane-owned-scroll-roots-and-full-height-placeholders-2026-04-19.md
@@ -0,0 +1,131 @@
+---
+title: Reader 栏内滚动条修复需要栏内 scroll root 与占位态全高链路
+date: 2026-04-19
+category: ui-bugs
+module: article reader
+problem_type: ui_bug
+component: react_component
+symptoms:
+  - desktop reader 可能退回到更像页面级滚动，而不是让文章列表栏与详情栏各自独立滚动
+  - 左栏依赖脆弱的 `sm:h-full` 高度链路，右栏仍使用原生 `overflow-auto`，导致滚动条行为不对称且不易被发现
+  - detail pane 接入共享 scroll wrapper 之后，如果占位态路径没有继续保持全高 flex 链路，empty 或 unavailable 状态就可能失去垂直居中
+root_cause: scope_issue
+resolution_type: code_fix
+severity: medium
+related_components:
+  - next_page
+  - testing_framework
+tags:
+  [
+    article-reader,
+    dual-pane,
+    scroll-area,
+    scrollbar,
+    overflow,
+    placeholder-state,
+    flex-height-chain,
+  ]
+---
+
+# Reader 栏内滚动条修复需要栏内 scroll root 与占位态全高链路
+
+## Problem
+
+desktop reader 的设计本来是固定高度的双栏阅读面，但最初的高度/overflow 链路让滚动所有权从栏内漂走了。左栏依赖环境高度碰巧成立，右栏继续走原生 `overflow-auto`，后续 detail refactor 又暴露出：占位态也必须继承和正文一样的全高布局契约，否则 reader 结构虽然还在，布局却会塌。
+
+## Symptoms
+
+- 在 desktop 上，页面本身可能重新变成主要滚动容器，而不是左右两栏各自拥有独立滚动。
+- 左右两栏没有共享同一套滚动条契约，overflow 时行为不一致。
+- 空态或 unavailable 的 detail 状态进入 scroll wrapper 后，如果没有足够的高度上下文，就可能失去原本的垂直居中。
+
+## What Didn't Work
+
+- 让右栏继续保留原生 `overflow-auto`，而左栏单独使用共享 `ScrollArea`，会让两栏行为持续不对称，也让滚动条可见性受 OS / 浏览器默认策略摆布。
+- 在左栏里只保留 `sm:h-full`，并不能在 fixed shell 内建立稳定高度链路；它只是在祖先尺寸刚好对齐时“看起来能工作”。
+- 把占位态内容搬进新的 scroll wrapper 却不补回 `min-h-full` + `flex-1` 链路，虽然 scroll root 还在，但之前的居中 empty-state 布局会悄悄丢失。
+
+## Solution
+
+把 reader shell 和两个 pane 的滚动所有权都显式化，再让占位态沿用同样的全高契约。
+
+现在 shell 明确拥有固定视口边界，共享 primitive 也被收紧成 flex-owned scroll root，并暴露稳定的结构 hook：
+
+```tsx
+<main className="h-dvh min-h-dvh overflow-hidden ...">
+  <section className="... h-[calc(100dvh-1rem-2px)] ... overflow-hidden ...">
+    <ArticleList ... />
+    <ArticleDetailPane ... />
+  </section>
+</main>
+```
+
+```tsx
+const ScrollArea = React.forwardRef(
+  ...({ className, children, type = "always", ...props }, ref) => (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      type={type}
+      className={cn(
+        "group/scroll-area relative flex min-h-0 flex-col overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="min-h-0 w-full flex-1 rounded-[inherit]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+    </ScrollAreaPrimitive.Root>
+  ),
+);
+```
+
+detail pane 现在和左栏共用同一套 scroll root；同时，占位态继续保留全高 flex 链路，这样 refactor 后居中不会丢：
+
+```tsx
+<ScrollArea data-testid="article-detail-scroll-area" className="min-h-0 flex-1">
+  <div
+    className={cn(
+      "px-5 py-5 lg:px-7 lg:py-7 xl:px-8 xl:py-8",
+      isPlaceholderState && "flex min-h-full flex-col",
+    )}
+  >
+    <div
+      className={cn(
+        "mx-auto w-full max-w-5xl",
+        isPlaceholderState && "flex min-h-full flex-1 flex-col",
+      )}
+    >
+      {content}
+    </div>
+  </div>
+</ScrollArea>
+```
+
+验证被拆成 SSR 与浏览器两层：
+
+- `apps/web/app/page.spec.tsx` 断言 fixed shell class、两个 scroll root，以及占位态所依赖的全高 wrapper 结构。
+- `apps/web/e2e/home.spec.ts` 证明 `scrollHeight > clientHeight`、左右两栏的 `scrollTop` 可以独立变化、pane 内滚动时 header 保持稳定，以及 pending / unavailable 状态下 detail scroll root 仍然存在。
+
+## Why This Works
+
+这个问题不是少了某一个 class，而是滚动所有权边界错了。shell 的职责是裁剪阅读面，所以 overflow 必须明确落在 pane 内部。一旦左右两栏都收敛到同一套 `ScrollArea` 契约，并让 body 显式进入 `min-h-0 flex-1` 链路，浏览器就不需要再“猜”到底该谁滚。后续的占位态修复也是同一原理：empty / unavailable 状态重新继承了和正常 detail body 一样的全高 flex 链路，所以内容被 fallback 替换时，布局不会塌。
+
+## Prevention
+
+- 在固定高度的 reader 或 dashboard 布局里，把 header 放在 scroll body 外面，并让 pane body 成为显式 scroll root。
+- 不要在嵌套 flex shell 里只靠 `h-full`；要从 shell 到 viewport 到 content wrapper 一直保留 `overflow-hidden` -> `min-h-0` -> `flex-1` 这条高度链。
+- 当 empty、pending、unavailable 状态被搬进共享 scroll wrapper 时，保留它们的全高布局路径，并为这些居中依赖的 wrapper class 加断言。
+- 保留稳定的 scroll-root selector，比如 `data-testid="article-list-scroll-area"` 与 `data-slot="scroll-area-viewport"`，让浏览器测试可以验证真实 overflow 行为，而不只是看 markup。
+
+## Related Issues
+
+- 配对实现计划：
+  - `docs/en/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md`
+  - `docs/zh-Hans/plans/2026-04-19-001-fix-reader-pane-scrollbars-plan.md`
+- 相关 learning：`docs/zh-Hans/solutions/logic-errors/article-summary-retryable-failures-must-not-clear-existing-summary-2026-04-18.md` —— 即使 summary 处于 pending 或 unavailable，reader 也应该保持稳定、可见的结构。
+- 通过 `gh issue list --search "reader scrollbar article detail scroll" --state all --limit 5` 检索后，没有找到相关 GitHub issue。
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
index 520c3e0..a05b91c 100644
--- a/packages/ui/src/components/scroll-area.tsx
+++ b/packages/ui/src/components/scroll-area.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
@@ -6,13 +8,21 @@ import { cn } from "../lib/utils";
 const ScrollArea = React.forwardRef<
   React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, type = "always", ...props }, ref) => (
   <ScrollAreaPrimitive.Root
+    data-slot="scroll-area"
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    type={type}
+    className={cn(
+      "group/scroll-area relative flex min-h-0 flex-col overflow-hidden",
+      className,
+    )}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport
+      data-slot="scroll-area-viewport"
+      className="min-h-0 w-full flex-1 rounded-[inherit]"
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -26,19 +36,28 @@ const ScrollBar = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    forceMount
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none p-0.5 transition-colors select-none",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent",
+      "flex touch-none rounded-full p-px opacity-20 transition-[opacity,background-color] duration-200 select-none group-hover/scroll-area:opacity-60",
+      orientation === "vertical" && "my-1 h-[calc(100%-0.5rem)] w-1.5",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent",
+        "mx-1 h-1.5 w-[calc(100%-0.5rem)] flex-col",
       className,
     )}
+    style={{
+      backgroundColor: "rgba(148, 163, 184, 0.1)",
+      width: orientation === "vertical" ? "6px" : undefined,
+      height: orientation === "horizontal" ? "6px" : undefined,
+    }}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-ink/20" />
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      className="relative flex-1 rounded-full bg-[rgba(22,32,51,0.14)] transition-[background-color,opacity] duration-200 group-hover/scroll-area:bg-[rgba(22,32,51,0.22)] data-[state=visible]:bg-[rgba(22,32,51,0.26)]"
+    />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;