fix(vscode): fit settings sidebar to localized section labels

[marius-kilocode]

Problem

The settings sidebar clipped localized section labels in non-English languages. German labels like "Automatisch genehmigen" and "Autovervollständigung" (22 chars) were truncated with an ellipsis because the sidebar was only 150px wide.

Before:

After:

Root cause

Two competing CSS rules set the settings sidebar width, and the wrong one won on specificity:

• Upstream packages/ui/src/components/tabs.css — [data-orientation="vertical"][data-variant="settings"] sets width: 150px (200px at viewport ≥ 640px). Specificity (0,4,0).
• Kilo packages/kilo-ui/src/components/tabs.css — [data-variant="settings"] (missing the data-orientation qualifier) intended width: 180px but only has specificity (0,3,0), so the upstream 150px always won. The Kilo override was effectively dead code.

A fixed 180px would also still be too narrow for the longest translations across all locales (e.g. Italian "Informazioni su Kilo Code", Spanish "Comportamiento del agente", Polish "Automatyczne zatwierdzanie" — ~25 chars).

Fix

In packages/kilo-ui/src/components/tabs.css:

1. Added the [data-orientation="vertical"] qualifier so the Kilo rule matches the upstream selector specificity and actually takes effect.
2. Switched from a fixed width: 180px to content-driven sizing: width: auto; min-width: 180px. The sidebar now grows to fit the longest translated label instead of truncating it, while keeping a sensible minimum for short locales. The content panel already has flex: 1, so it absorbs the remaining space.

This is entirely Kilo-owned CSS (packages/kilo-ui/), so no kilocode_change markers are needed and there is no upstream merge impact.

Verification

Built the extension and verified in an isolated VS Code self-test instance. Queried the live settings webview DOM: all 16 section labels render with clipped: false (trigger scrollWidth ≤ clientWidth), and the list width is 180px for English (the min-width floor). Longer locales will expand beyond that as needed.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

The fix correctly equalizes selector specificity with the upstream [data-orientation="vertical"][data-variant="settings"] rule and switches to content-driven sizing (width: auto; min-width: 180px). Change is confined to Kilo-owned CSS (packages/kilo-ui/), includes a proper user-facing changeset, and the author verified the fix against the built webview DOM.

Files Reviewed (2 files)

• packages/kilo-ui/src/components/tabs.css
• .changeset/fix-settings-sidebar-i18n-width.md

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 24 · Output: 11.5K · Cached: 519.2K}

_{Review guidance: REVIEW.md from base branch main}