Skip to content

fix(workspace): scroll sidebar instead of wrapping into columns on short viewports - #151

Open
DeepDiver1975 wants to merge 2 commits into
mainfrom
feat/sidebar-tabs-scroll
Open

fix(workspace): scroll sidebar instead of wrapping into columns on short viewports#151
DeepDiver1975 wants to merge 2 commits into
mainfrom
feat/sidebar-tabs-scroll

Conversation

@DeepDiver1975

@DeepDiver1975 DeepDiver1975 commented Aug 29, 2026

Copy link
Copy Markdown
Collaborator

Fixes #146

Problem

The left nav rail is a native TabControl with TabStripPlacement="Left". Avalonia's Fluent theme gives a Left-placed tab strip a vertical WrapPanel, and since the ItemsPresenter sits directly in the template's DockPanel, a viewport too short to fit all 10 rail tabs made the rail wrap into extra side-by-side columns. At 400px height the measured columns were x=0, 172, 344, 516, 688, 860, 1032, 1204, 1376, 1548 — every tab its own column, and on a narrow window the right-most ones run off the edge entirely.

Fix

Override the TabControl control template (Styles.axaml:280) — the upstream Avalonia 12.1.1 Fluent template with exactly one change: PART_ItemsPresenter is wrapped in a ScrollViewer (which takes the DockPanel.Dock="{TemplateBinding TabStripPlacement}"" role). The WrapPanelnow measures with effectively unbounded height in its wrap direction, so the rail stays a single column and grows a scrollbar instead of wrapping. The presenter keeps itsPART_ItemsPresentername, so the theme's^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanelrule and the app'sMargin=0` rule keep applying unchanged.

No changes to IncidentWorkspaceView.axaml, its code-behind, or any ViewModel.

Verification

  • New acceptance test ModuleTabsScrollingTests.cs: renders the workspace at 1920x400 and asserts (1) all 10 tabs still present, (2) every tab shares one horizontal origin (single column), (3) the tab strip's ScrollViewer has Extent.Height > Viewport.Height (overflow, not clipping).
  • Full acceptance suite: 89 passed, 0 failed (no regression in LayoutAlignmentTests gutter alignment or tab-content rendering).

Screenshots

Before (rail wrapped into per-tab columns at 400px height) and after (single scrollable column) at a short viewport:
module-tabs-scrolling

module-tabs-scrolling

…iewports (#146)

Signed-off-by: Thomas Müller <1005065+DeepDiver1975@users.noreply.github.com>
…ort viewports (#146)

Signed-off-by: Thomas Müller <1005065+DeepDiver1975@users.noreply.github.com>
@DeepDiver1975
DeepDiver1975 force-pushed the feat/sidebar-tabs-scroll branch from 0b065dd to 9b4a872 Compare August 29, 2026 21:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Workspace sidebar splits into two columns on short viewports — should scroll instead

1 participant