fix: center Modern UI panel title tabs in the 32px header

[Akshat Anand (cipheraxat)]

Fixes #331013

Modern UI editor tabs sit in a uniform 4px gutter (24px pill in a 32px title). Bottom-panel title tabs did not: classic UI still draws a 1px top border on .part.panel.bottom .composite.title (panelpart.css). Floating panels already make that border transparent, but the width was still consuming a layout pixel, so the 32px pills sat off-center — 5px above the pill and 3px below it, vs 4px on the left.

Dropping border-top-width to 0 when Modern UI is on restores the same 4px gutter as the editor tab bar.

Measured against a 32px title (live Code OSS, Modern UI + floating panels):

	before	after
editor fill vs title	4 / 4 / 4	4 / 4 / 4
panel indicator vs title	5 / 4 / 3	4 / 4 / 4
panel title border-top-width	1px (transparent)	0

Hover bounding boxes already used the same 24px fill/indicator as the active pill; they now also share the same outer insets.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates Modern UI styling so bottom panel title tabs aren’t visually offset by the classic 1px top border, and adds a regression test to ensure 32px tab “pills” remain vertically centered.

Changes:

• Add Modern UI CSS override to remove the bottom panel title’s classic top border width.
• Add a browser test asserting computed styles for panel title tabs in the bottom panel configuration.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/vs/workbench/contrib/modernUI/test/browser/modernUI.contribution.test.ts	Adds a regression test validating computed styles (border/padding/heights) for bottom panel title tabs.
src/vs/workbench/contrib/modernUI/browser/media/padding.css	Removes the classic 1px top border width on bottom panel composite titles in Modern UI to keep 32px pills centered.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Lee Murray (mrleemurray)]

Akshat Anand (@cipheraxat) thanks for the PR! Can you review the Copilot feedback & resolve?

[Akshat Anand (cipheraxat)]

Copilot feedback addressed in 4008ee0 and 74225c2:

1. Test assertion scope — trimmed the regression test from 7 assertions to the 3 properties this fix actually owns (titleBorderTopWidth, titleBorderTopStyle, actionItemBorderTop), removing layout values owned by other rules that made the test brittle.
2. CSS reset robustness — switched border-top-width: 0 → border-top: none so a future width re-introduction cannot silently restore the off-center gutter while leaving a stale solid style behind.

Both review threads replied; marking as resolved.

[Lee Murray (mrleemurray)]

Thank you!

[Akshat Anand (cipheraxat)]

Thanks Lee Murray (@mrleemurray) :)