From 50eef73429c3490da42446b954b6111c03a1cba5 Mon Sep 17 00:00:00 2001 From: Hibryda Date: Sun, 8 Mar 2026 01:36:23 +0100 Subject: [PATCH] fix(v3): remove leftover v2 grid layout on #app constraining sidebar to 260px --- v2/src/App.svelte | 36 ++++++++++++++++--- v2/src/app.css | 17 --------- .../lib/components/Context/ContextPane.svelte | 31 ++++++++-------- 3 files changed, 49 insertions(+), 35 deletions(-) diff --git a/v2/src/App.svelte b/v2/src/App.svelte index 7b97f41..b4fa70b 100644 --- a/v2/src/App.svelte +++ b/v2/src/App.svelte @@ -29,6 +29,8 @@ let loaded = $state(false); let activeTab = $derived(getActiveTab()); + let panelContentEl: HTMLElement | undefined = $state(); + let panelWidth = $state(undefined); // Panel titles const panelTitles: Record = { @@ -38,6 +40,34 @@ settings: 'Settings', }; + // Measure the panel content's natural width by finding the widest + // nowrap element or element with min-width, then sizing the drawer to fit. + $effect(() => { + const el = panelContentEl; + void activeTab; + if (!el) { panelWidth = undefined; return; } + const frame = requestAnimationFrame(() => { + // Find all elements that define intrinsic width (nowrap text, inputs, etc.) + let maxW = 0; + const candidates = el.querySelectorAll('[style*="white-space"], h3, h4, input, .settings-list, .settings-tab, .docs-tab, .context-tab'); + for (const c of candidates) { + maxW = Math.max(maxW, c.scrollWidth); + } + // Also check the direct child's min-width + const child = el.firstElementChild as HTMLElement; + if (child) { + const cs = getComputedStyle(child); + const mw = parseFloat(cs.minWidth); + if (!isNaN(mw)) maxW = Math.max(maxW, mw); + } + if (maxW > 0) { + // Add padding for panel-content's own padding + panelWidth = `${maxW + 24}px`; + } + }); + return () => cancelAnimationFrame(frame); + }); + function toggleDrawer() { drawerOpen = !drawerOpen; } @@ -144,7 +174,7 @@ {#if drawerOpen} -