Skip to content

[feat][#963] VSCode Plugin Equal-Width Tabs with Overflow Protection#964

Merged
were merged 1 commit intomainfrom
issue-963
Feb 18, 2026
Merged

[feat][#963] VSCode Plugin Equal-Width Tabs with Overflow Protection#964
were merged 1 commit intomainfrom
issue-963

Conversation

@were
Copy link
Contributor

@were were commented Feb 18, 2026

[feat][#963] VSCode Plugin Equal-Width Tabs with Overflow Protection

Implement equal-width tabs for the VSCode plugin's unified view to improve
visual harmony and professional appearance.

Changes

vscode/src/view/unifiedViewProvider.ts:

  • Add flex: 1 to distribute equal width to all three tabs (Plan, Worktree, Settings)
  • Add text-align: center to center tab labels
  • Add white-space: nowrap to prevent text wrapping
  • Add overflow: hidden and text-overflow: ellipsis for graceful overflow handling

vscode/src/view/unifiedViewProvider.md:

  • Document tab styling behavior including flexbox equal-width distribution
  • Document overflow protection strategy for narrow sidebars

tests/vscode/test-tab-styling.sh:

  • New visual regression test to verify all required CSS properties are present

Success Criteria

  • flex: 1 distributes equal width to all three tabs
  • text-align: center centers tab labels
  • white-space: nowrap prevents text wrapping
  • text-overflow: ellipsis truncates with "..." when space is insufficient
  • ✅ All new CSS properties are documented in interface docs
  • ✅ Visual regression tests pass

Test Results

  • tests/vscode/test-link-detection.sh: 14 passed, 0 failed
  • tests/vscode/test-step-progress-parser.sh: 7 passed, 0 failed
  • tests/vscode/test-tab-styling.sh: passed

Build verified: make vscode-plugin compiles successfully with no errors.

Issue 963 resolved

closes #963

Implement equal-width tabs for the VSCode plugin's unified view to improve
visual harmony and professional appearance.

Changes:
- vscode/src/view/unifiedViewProvider.ts:
  - Add `flex: 1` to distribute equal width to all three tabs (Plan, Worktree, Settings)
  - Add `text-align: center` to center tab labels
  - Add `white-space: nowrap` to prevent text wrapping
  - Add `overflow: hidden` and `text-overflow: ellipsis` for graceful overflow handling

- vscode/src/view/unifiedViewProvider.md:
  - Document tab styling behavior including flexbox equal-width distribution
  - Document overflow protection strategy for narrow sidebars

- tests/vscode/test-tab-styling.sh:
  - New visual regression test to verify all required CSS properties are present
  - Tests verify properties exist within correct CSS block context

All tests pass:
- tests/vscode/test-link-detection.sh: 14 passed, 0 failed
- tests/vscode/test-step-progress-parser.sh: 7 passed, 0 failed
- tests/vscode/test-tab-styling.sh: passed

Build verified: `make vscode-plugin` compiles successfully with no errors.

closes #963
@were were merged commit 72870ca into main Feb 18, 2026
4 checks passed
@were were deleted the issue-963 branch February 18, 2026 17:02
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.

[plan] [#963] VSCode Plugin Equal-Width Tabs

1 participant

Comments