From 27cc50fb9c0575bf99092952eed4ddbbdb90c37d Mon Sep 17 00:00:00 2001 From: Hibryda Date: Sun, 8 Mar 2026 01:13:50 +0100 Subject: [PATCH] docs: update meta files for content-driven sidebar width session --- CHANGELOG.md | 7 ++++++- docs/v3-progress.md | 11 +++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d428179..c0b6644 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - GlobalTabBar.svelte CSS converted from px to rem: rail width 2.75rem, button 2rem, gap 0.25rem, padding 0.5rem 0.375rem, border-radius 0.375rem; rail-btn color changed from --ctp-overlay1 to --ctp-subtext0 for better contrast - App.svelte sidebar header CSS converted from px to rem: padding 0.5rem 0.75rem, close button 1.375rem, border-radius 0.25rem -- UI redesigned from top tab bar + right-side settings drawer to VSCode-style left sidebar: vertical icon rail (GlobalTabBar, 2.75rem, 4 SVG icons) + expandable drawer panel (28em, max 50%) + always-visible main workspace (ProjectGrid) +- Sidebar panel changed from fixed width (28em) to content-driven sizing: `width: max-content` with `min-width: 16em` and `max-width: 50%`; each tab component defines its own `min-width: 22em` +- Sidebar panel and panel-content overflow changed from `hidden` to `overflow-y: auto` to allow content to drive parent width +- SettingsTab.svelte padding converted from px to rem (0.75rem 1rem) +- DocsTab.svelte converted from px to rem: file-picker 14em, picker-title/file-btn/empty padding in rem +- ContextTab.svelte, DocsTab.svelte, SettingsTab.svelte all now set `min-width: 22em` for content-driven drawer sizing +- UI redesigned from top tab bar + right-side settings drawer to VSCode-style left sidebar: vertical icon rail (GlobalTabBar, 2.75rem, 4 SVG icons) + expandable drawer panel (content-driven width) + always-visible main workspace (ProjectGrid) - GlobalTabBar rewritten from horizontal text tabs + gear icon to vertical icon rail with SVG icons for Sessions, Docs, Context, Settings; Props: `expanded`/`ontoggle` (was `settingsOpen`/`ontoggleSettings`) - Settings is now a regular sidebar tab (not a special right-side drawer); `WorkspaceTab` type: `'sessions' | 'docs' | 'context' | 'settings'` - App.svelte layout: `.main-row` flex container with icon rail + optional sidebar panel + workspace; state renamed `settingsOpen` -> `drawerOpen` diff --git a/docs/v3-progress.md b/docs/v3-progress.md index 598440d..e394945 100644 --- a/docs/v3-progress.md +++ b/docs/v3-progress.md @@ -284,3 +284,14 @@ All editor themes map to the same `--ctp-*` CSS custom property names (26 vars). - [x] GlobalTabBar.svelte: rail width 36px -> 2.75rem, button 28px -> 2rem, gap 2px -> 0.25rem, padding 6px 4px -> 0.5rem 0.375rem, border-radius 4px -> 0.375rem - [x] App.svelte: sidebar header padding 8px 12px -> 0.5rem 0.75rem, close button 22px -> 1.375rem, border-radius 4px -> 0.25rem - [x] Also changed GlobalTabBar rail-btn color from --ctp-overlay1 to --ctp-subtext0 for better contrast + +### Session: 2026-03-08 — Content-Driven Sidebar Width + +#### Sidebar Panel Sizing +- [x] Changed `.sidebar-panel` from fixed `width: 28em` to `width: max-content` with `min-width: 16em` and `max-width: 50%` +- [x] Changed `.sidebar-panel` and `.panel-content` from `overflow: hidden` to `overflow-y: auto` — hidden was blocking content from driving parent width +- [x] Each tab component now defines its own `min-width: 22em` (SettingsTab, ContextTab, DocsTab) + +#### Additional px → rem Conversions +- [x] SettingsTab.svelte: padding 12px 16px → 0.75rem 1rem +- [x] DocsTab.svelte: file-picker 220px → 14em, picker-title padding → rem, file-btn padding → rem, empty/loading padding → rem