Fix dark theme scrollbar colors customizations pages

[Jessie Houghton (houghj16)]

Fixes #333544

Before:

After:

This pull request addresses the scrollbar styling for the customizations and plugins pages to ensure they align with the dark theme colors and layout requirements. Key changes include:

• Replaced the native scrollbar with a themed overlay scrollbar (DomScrollableElement) for both the customizations and plugins pages.
• Ensured a minimum 16px right gutter to prevent content overlap with the scrollbar, while adjusting the scrollbar position to maintain a 6px gap from the content.
• Updated CSS to reflect the correct scrollbar colors using standard theme tokens.

All changes have been validated with successful client compiles, CSS lint checks, and live DOM inspections in Code OSS.

[Copilot]

Copilot review overview

Review tier: Balanced
Findings: 3

New issues introduced by this change (3)

Severity	Finding
	src/​vs/​workbench/​contrib/​chat/​browser/​aiCustomization/​aiCustomizationListWidget.ts — Keyboard navigation can now desynchronize the themed scrollbar. CustomizationCardListController…
	src/​vs/​workbench/​contrib/​chat/​browser/​aiCustomization/​pluginListWidget.ts — Keyboard focus can scroll cardContainer natively without updating DomScrollableElement's model.…
	src/​vs/​workbench/​contrib/​chat/​browser/​aiCustomization/​pluginListWidget.ts — The existing PluginsTabScrolled component fixture calls revealLastItem() and resolves…

What changed in this PR

Replaces native scrollbars on customization and plugin card pages with VS Code’s themed overlay scrollbar.

Changes:

• Added DomScrollableElement wrappers and scroll handling.
• Added content/layout rescanning.
• Added scrollbar gutter and wrapper styling.

File	Description
aiCustomizationListWidget.ts	Adds themed card scrolling.
pluginListWidget.ts	Adds themed scrolling across plugin surfaces.
aiCustomizationManagement.css	Defines overlay layout and gutter spacing.

Suppressed comments (3)

src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts:800

• Pass the containing window to DisposableResizeObserver. Without it, the observer is constructed in mainWindow; when this editor is hosted in an auxiliary window, the new card scrollbar will not be observed in the correct DOM realm. Nearby observers already use this pattern (aiCustomizationListWidget.ts:725-739, aiCustomizationManagementEditor.ts:899-905).

		const cardResizeObserver = this._register(new DOM.DisposableResizeObserver(
			'AICustomizationListWidget.cardScrollable',
			() => this.cardScrollable.scanDomNode(),
		));
		this._register(cardResizeObserver.observe(this.cardScrollableNode));

src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts:879

• Pass DOM.getWindow(this.cardScrollableNode) to this observer. The default is mainWindow, so plugin cards opened in an auxiliary editor window use a ResizeObserver from the wrong realm; the other observers in this widget already pass DOM.getWindow(this.element) (pluginListWidget.ts:704-708, 754-765).

		const cardResizeObserver = this._register(new DOM.DisposableResizeObserver(
			'PluginListWidget.cardScrollable',
			() => this.cardScrollable.scanDomNode(),
		));
		this._register(cardResizeObserver.observe(this.cardScrollableNode));

src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts:1216

• This per-content observer also defaults to mainWindow. Since createCardScrollContent runs after the widget may have been mounted in an auxiliary window, pass DOM.getWindow(content) so dynamic card height changes are observed in the containing realm.

		const resizeObserver = this.cardDisposables.add(new DOM.DisposableResizeObserver(
			'PluginListWidget.cardScrollContent',
			() => this.cardScrollable.scanDomNode(),
		));
		this.cardDisposables.add(resizeObserver.observe(content));

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

No screenshot changes.