From 97860c3db1c9abc4571c8b2c089018993564a5bc Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Sun, 8 Mar 2026 01:13:43 +0100
Subject: [PATCH] style(v3): content-driven sidebar width and remaining
 px-to-rem conversions

Sidebar panel now uses width: max-content with per-tab min-width (22em)
instead of fixed 28em. Changed overflow: hidden to overflow-y: auto on
panel + panel-content so content drives parent width. Converted remaining
px values in SettingsTab, DocsTab to rem/em per rule 18.
---
 v2/src/App.svelte                                  |  7 ++++---
 v2/src/lib/components/Workspace/ContextTab.svelte  |  1 +
 v2/src/lib/components/Workspace/DocsTab.svelte     | 11 ++++++-----
 v2/src/lib/components/Workspace/SettingsTab.svelte |  3 ++-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/v2/src/App.svelte b/v2/src/App.svelte
index 6e5e1ce..7b97f41 100644
--- a/v2/src/App.svelte
+++ b/v2/src/App.svelte
@@ -203,13 +203,14 @@
   }
 
   .sidebar-panel {
-    width: 28em;
+    width: max-content;
+    min-width: 16em;
     max-width: 50%;
     display: flex;
     flex-direction: column;
     background: var(--ctp-base);
     border-right: 1px solid var(--ctp-surface1);
-    overflow: hidden;
+    overflow-y: auto;
     flex-shrink: 0;
   }
 
@@ -249,7 +250,7 @@
 
   .panel-content {
     flex: 1;
-    overflow: hidden;
+    overflow-y: auto;
   }
 
   .workspace {
diff --git a/v2/src/lib/components/Workspace/ContextTab.svelte b/v2/src/lib/components/Workspace/ContextTab.svelte
index 26ebbc1..e9970f1 100644
--- a/v2/src/lib/components/Workspace/ContextTab.svelte
+++ b/v2/src/lib/components/Workspace/ContextTab.svelte
@@ -10,5 +10,6 @@
   .context-tab {
     height: 100%;
     overflow: hidden;
+    min-width: 22em;
   }
 </style>
diff --git a/v2/src/lib/components/Workspace/DocsTab.svelte b/v2/src/lib/components/Workspace/DocsTab.svelte
index ca5fd31..299adf9 100644
--- a/v2/src/lib/components/Workspace/DocsTab.svelte
+++ b/v2/src/lib/components/Workspace/DocsTab.svelte
@@ -80,22 +80,23 @@
     display: flex;
     height: 100%;
     overflow: hidden;
+    min-width: 22em;
   }
 
   .file-picker {
-    width: 220px;
+    width: 14em;
     flex-shrink: 0;
     background: var(--ctp-mantle);
     border-right: 1px solid var(--ctp-surface0);
     overflow-y: auto;
-    padding: 8px 0;
+    padding: 0.5rem 0;
   }
 
   .picker-title {
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--ctp-subtext0);
-    padding: 4px 12px 8px;
+    padding: 0.25rem 0.75rem 0.5rem;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -110,7 +111,7 @@
   .file-btn {
     display: block;
     width: 100%;
-    padding: 5px 12px;
+    padding: 0.3rem 0.75rem;
     background: transparent;
     border: none;
     color: var(--ctp-subtext0);
@@ -150,7 +151,7 @@
     justify-content: center;
     color: var(--ctp-overlay0);
     font-size: 0.85rem;
-    padding: 20px;
+    padding: 1.25rem;
   }
 
   .no-selection {
diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte
index c643e10..e42376e 100644
--- a/v2/src/lib/components/Workspace/SettingsTab.svelte
+++ b/v2/src/lib/components/Workspace/SettingsTab.svelte
@@ -478,9 +478,10 @@
 
 <style>
   .settings-tab {
-    padding: 12px 16px;
+    padding: 0.75rem 1rem;
     overflow-y: auto;
     height: 100%;
+    min-width: 22em;
   }
 
   h2 {