Make PDF viewer toolbar responsive with overflow handling and horizontal scrolling

[timhaintz]

Problem

The PDF Toolkit toolbar does not adapt well to narrower editor widths or smaller screens. As the available width shrinks, controls can become cramped or overflow, making the PDF viewer harder to use.

From the current UI, the toolbar includes many controls in a single horizontal row:

• navigation
• zoom
• rotation
• dark mode
• screenshot menu
• extracted menu
• search
• page count

On smaller screens or split editors, this layout needs a more resilient responsive strategy.

Proposed solution

Investigate and implement a responsive toolbar layout for the PDF Toolkit webview.

Minimum requirements:

1. Dynamically resize toolbar elements based on available width
2. Add a horizontal scrollbar when the toolbar cannot fit
3. Ensure controls remain usable in narrow editor panes
4. Keep the most important controls discoverable and accessible

Areas to investigate

• Best practices for responsive layouts inside VS Code webviews
• Whether horizontal scrolling should apply to the whole toolbar row or only an overflow section
• Whether some controls should collapse into a menu at narrower breakpoints
• Whether the search box should shrink responsively or move into an overflow area
• Keyboard accessibility and focus behavior when horizontal scrolling is present

Suggested UX directions

Possible approaches:

• simple horizontal scroll container for the toolbar
• responsive wrapping into multiple rows
• priority-based overflow menu for lower-priority controls
• hybrid approach: keep core controls visible, move secondary controls into an overflow menu

Why this matters

PDF Toolkit is especially useful in constrained layouts such as:

• split editor panes
• laptop screens
• side-by-side workflows with Copilot Chat open
• presentation/demo environments

A responsive toolbar would make the extension much more robust and polished in real-world usage.

Implementation note

This is likely in the PDF webview UI layer rather than command registration. It would be useful to review current VS Code webview layout guidance and adopt the most maintainable pattern for responsive toolbars.