ux-css-layoutlisted

This skill covers CSS file organization, naming, standard sizes, programmatic layout (SplitView, Grid, scrollable), responsive patterns, and text overflow handling. --- ## 1. File Organization CSS files are **co-located** with their TypeScript components: ``` src/vs/base/browser/ui/button/ button.ts button.css src/vs/workbench/contrib/myFeature/browser/ myFeature.ts media/ myFeature.css ``` Import CSS directly in the TS file: ```typescript import './media/myFeature.css'; // or for base widgets: import './button.css'; ``` Workbench-level global styles live in `src/vs/workbench/browser/media/`. ## 2. Class Naming - **`monaco-` prefix** for all major components: `.monaco-workbench`, `.monaco-split-view2`, `.monaco-scrollable-element` - **Modifier classes**: `.monaco-split-view2.vertical`, `.monaco-split-view2.horizontal` - **State classes**: `.visible`, `.focused`, `.active`, `.highlight` - Feature-specific classes use kebab-case without prefix: `.my-feature`, `.outline-pane`, `.welcome-view-content` ## 3. Standard Sizes | Element | Size | |---------|------| | Part title height | 35px | | Title padding (horizontal) | 8px | | Title label inner padding | 12px | | Action area padding | 5px | | Action icon size | 16px | | Body font-size | 13px (workbench), 11px (HTML body) | | Line height | 1.4em | | Validation message font-size | 12px (line-height: 17px) | > For `padding`/`margin`/`gap`, `border-radius`, `font-size`/`font-weight`, > codicon size a