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} -