Scrolling content is narrowed by the scrollbar width while the scrollbar is shown, so it no longer sits under the bar

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tests/ui/scroll-container.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { ScrollContainer, Spacer, VStack } from '../../src/ui';
+import { ScrollContainer, Spacer, Theme, VStack } from '../../src/ui';
 
 /** Row tops after a layout; an unlaid-out stack leaves every child at 0. */
 const tops = (stack: VStack) => stack.children.map((c) => c.y);
@@ -36,3 +36,28 @@ describe('a scroll container told its content changed', () => {
     expect(scroll.maxScroll).toBe(10);
   });
 });
+
+describe('a scroll container and its scrollbar', () => {
+  const filled = (viewportH: number, rowCount: number) => {
+    const scroll = new ScrollContainer();
+    scroll.resize(200, viewportH);
+    const rows = new VStack();
+    for (let i = 0; i < rowCount; i++) rows.add(new Spacer(20));
+    scroll.setContent(rows);
+    return { scroll, rows };
+  };
+
+  it('gives content that fits the full width', () => {
+    expect(filled(300, 3).rows.w).toBe(200);
+  });
+
+  it('keeps the gutter free for the bar while the content scrolls', () => {
+    expect(filled(50, 3).rows.w).toBe(200 - Theme.scrollbarWidth);
+  });
+
+  it('hands the gutter back once the content fits again', () => {
+    const { scroll, rows } = filled(50, 3);
+    scroll.resize(200, 300);
+    expect(rows.w).toBe(200);
+  });
+});