fix(theme): correct spaced-theme tab sizing in wrap overflow mode

[mathuo]

Description

Spaced themes rendered tabs at the wrong size when overflow.mode: 'wrap' was enabled, in both header orientations.

Root cause. Core's multi-row wrap rules pin each wrapped tab to the full --dv-tabs-and-actions-container-height — as the tab's height for a horizontal header, and as its width for a vertical (edge-group) header. That assumes a zero tab margin, which holds for the default theme but not the spaced themes: those add --dv-tab-margin, and flex-wrap counts that margin toward each row's/column's cross-size. So a full-size tab plus its margins:

• Horizontal: made every wrapped row 44px + 16px = 60px tall instead of 44px, and the tab filled the whole 44px instead of keeping the 28px pill inset it has in single-row mode (where flex align-items: stretch sizes it to the header height minus its margins).
• Vertical edge-group: made every wrapped tab 44px wide (filling/overflowing the 44px strip) instead of the 28px pill — throwing off the edge-group rendering.

Fix (_space-mixin.scss). Subtract the tab's cross-axis margin from the pinned size so each wrapped row/column is exactly one header unit and the pill proportions match single-row mode:

• Split --dv-tab-margin into --dv-tab-margin-block / --dv-tab-margin-inline parts (CSS calc() can't read a component out of the shorthand), keeping the shorthand composed from them so nothing else changes.
• Horizontal wrap: height: calc(var(--dv-tabs-and-actions-container-height) - 2 * var(--dv-tab-margin-block)).
• Vertical wrap: the cross-axis mirror on width (height stays core's live-measured --dv-wrap-vertical-tab-height). --dv-tab-margin-block is the cross-axis margin in both orientations.

Scoped entirely under the spaced-theme class — the default theme is untouched.

Type of change

• Bug fix
• New feature
• Breaking change
• Documentation
• Refactor / cleanup
• Build / CI / tooling

Affected packages

• dockview-core
• dockview (vanilla JS)
• dockview-react
• dockview-vue
• dockview-angular
• docs

How to test

Real-browser regression tests were added to e2e/tests/multi-row-tabs.spec.ts (the wrap suite). The invariant they assert is the row/column band — tab border-box + its cross-axis margins — which must equal exactly one header unit; the existing zero-margin default-theme assertion (tabH === rowH) can't catch this. A ?theme=<name> param was added to the e2e fixture so the spaced theme is drivable.

• spaced theme: each wrapped row band equals one header height (pill inset kept)
• spaced theme (vertical header): each wrapped column band equals one header width (pill inset kept)

Both fail on the pre-fix CSS (tab fills the full unit, band overshoots) and pass with the fix. Verified end-to-end in headless Chromium; measured before→after: horizontal row band 60px → 44px, vertical tab width 44px → 28px.

Manual repro: any *-spaced theme with overflow: { mode: 'wrap' }, add enough tabs to wrap a horizontal group, and flip a group's header to left/right for the edge-group case.

Note: 3 pre-existing vertical-header resize/drag tests in this suite fail in the headless sandbox regardless of this change — confirmed failing identically on the base commit (unrelated to these theme-scoped edits).

Checklist

• yarn lint:fix passes
• yarn format passes
• npm run gen has been run and generated files are up to date
• yarn test passes
• I have added or updated tests where applicable
• Breaking changes are documented

🤖 Generated with Claude Code

---

Generated by Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud