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>

src/ui/widgets/Menu.ts

@@ -109,7 +109,7 @@ export class Menu extends Popup {
     const size = this.list.measure();
     const room = this.roomFor(this.scroll);
     const scrolls = size.h > room;
-    this.scroll.minWidth = size.w + (scrolls ? Theme.scrollbarWidth + 4 : 0);
+    this.scroll.minWidth = size.w + (scrolls ? Theme.scrollbarWidth : 0);
     this.scroll.minHeight = Math.min(size.h, room);
     this.scroll.scrollTo(0);
     this.refreshLayout();

src/ui/widgets/ScrollContainer.ts

@@ -3,7 +3,11 @@ import { clamp } from '../math';
 import { Theme } from '../Theme';
 import { Widget } from '../Widget';
 
-/** Vertical scroll of one content widget, which gets the container's width and its own height. */
+/**
+ * Vertical scroll of one content widget, which gets the container's width and its own height.
+ * While the content scrolls it is narrowed by `Theme.scrollbarWidth`, so the bar sits beside it
+ * rather than on top of its right edge.
+ */
 export class ScrollContainer extends Widget {
   private readonly maskShape = new Graphics();
   private readonly scrollbar = new Graphics();
@@ -82,10 +86,11 @@ export class ScrollContainer extends Widget {
     if (!this.content) return;
     const size = this.content.measure();
     const height = Math.max(size.h, this.h);
+    const width = Math.max(0, this.w - (size.h > this.h ? Theme.scrollbarWidth : 0));
     // Content shorter than the viewport is pinned to the viewport height either way, so `resize`
     // would see no change and skip the layout -- leaving rows added since stacked at the origin.
-    const unchanged = this.content.w === this.w && this.content.h === height;
-    this.content.resize(this.w, height);
+    const unchanged = this.content.w === width && this.content.h === height;
+    this.content.resize(width, height);
     if (unchanged) this.content.layout();
     this.scrollY = clamp(this.scrollY, 0, this.maxScroll);
     this.applyScroll();