Skip to content

refactor(vscode): share session tab layout styles - #13741

Merged
marius-kilocode merged 1 commit into
mainfrom
dedupe-session-tab-css
Sep 3, 2026
Merged

refactor(vscode): share session tab layout styles#13741
marius-kilocode merged 1 commit into
mainfrom
dedupe-session-tab-css

Conversation

@marius-kilocode

Copy link
Copy Markdown
Collaborator

What Problem This Solves

Sidebar, main Agent Manager, and inspector tabs repeat the same equal-width sizing and horizontal-scroll declarations. Duplication fingerprint 9020d3c20123ef72 tracks part of this overlap, while the main Agent Manager strip repeats the same mechanics again.

Why This Change Was Made

Keep those shared declarations in the existing session-tabs.css, which both surfaces already load through chat.css. Group the existing selectors without adding a tab framework, imports, helpers, or JavaScript. Remove only the resolved allowlist entry, with no scanner changes or new exceptions.

This removes 50 production CSS lines net, or 62 lines total including the allowlist. The PR contains one focused commit across three files.

User Impact

No intended visual or interaction change. Preserve the 72px minimum, 240px sidebar/main cap versus 180px inspector cap, 36px main versus 32px inspector bars, and the distinct wrapper flex values. Inspector vertical clipping and close, drag, document-tab, and high-contrast rules stay surface-specific. Existing scrolling, focus, and width-freezing JavaScript is unchanged.

Evidence

  • Fresh duplication reports changed from 21 to 20 pairs, 404 to 394 duplicated lines, and 2,758 to 2,654 duplicated tokens. The ratchet passes without new exceptions. The after-report was also rerun after updating the branch to cf954237c1.
  • 60 existing Storybook layout cases matched the original CSS geometry and checked computed styles across narrow/wide bars, long labels, overflow, dark/light, and both high-contrast themes. Existing 200px main-story clipping was unchanged. Screenshots were read.
  • Isolated VS Code checks exercised close-width freezing and release, simulated pointer drag/reorder, real terminal tabs, and fixture document tabs. The self-test daemon failed before subagent verification completed. Only the owned test instance, backend, server, profiles, and fixture were cleaned up.
  • Existing focused tab tests, extension typecheck/lint/knip, compile/build checks, and formatting checks passed. Linux screenshot-baseline comparison was not run on macOS; Storybook has existing runtime and dead-PTY fixture errors.

Remaining tabs retain their widths after closing the middle tab:

Agent Manager session tabs retain their widths after closing a middle tab

Existing inspector story at narrow, normal, and wide panel sizes in high-contrast light, including horizontal overflow:

High-contrast light inspector tabs preserve narrow and wide layouts and scroll behavior

@kilo-code-bot

kilo-code-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)
  • packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
  • packages/kilo-vscode/webview-ui/src/styles/session-tabs.css
  • script/kilocode-duplication-allowlist.json

Reviewed by grok-4.6 · Input: 252.1K · Output: 13.4K · Cached: 328.7K

Review guidance: REVIEW.md from base branch main

@marius-kilocode
marius-kilocode merged commit e35d82e into main Sep 3, 2026
33 checks passed
@marius-kilocode
marius-kilocode deleted the dedupe-session-tab-css branch September 3, 2026 10:53
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.

2 participants