fix(v3): remove leftover v2 grid layout on #app constraining sidebar to 260px

v2/src/App.svelte

@@ -29,6 +29,8 @@
   let loaded = $state(false);
 
   let activeTab = $derived(getActiveTab());
+  let panelContentEl: HTMLElement | undefined = $state();
+  let panelWidth = $state<string | undefined>(undefined);
 
   // Panel titles
   const panelTitles: Record<string, string> = {
@@ -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 @@
       <GlobalTabBar expanded={drawerOpen} ontoggle={toggleDrawer} />
 
       {#if drawerOpen}
-        <aside class="sidebar-panel">
+        <aside class="sidebar-panel" style:width={panelWidth}>
           <div class="panel-header">
             <h2>{panelTitles[activeTab] ?? ''}</h2>
             <button class="panel-close" onclick={() => drawerOpen = false} title="Close sidebar (Ctrl+B)">
@@ -153,7 +183,7 @@
               </svg>
             </button>
           </div>
-          <div class="panel-content">
+          <div class="panel-content" bind:this={panelContentEl}>
             {#if activeTab === 'sessions'}
               <ProjectGrid />
             {:else if activeTab === 'docs'}
@@ -203,14 +233,12 @@
   }
 
   .sidebar-panel {
-    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-y: auto;
     flex-shrink: 0;
   }
 

v2/src/app.css

@@ -23,23 +23,6 @@ html, body {
 #app {
   height: 100%;
   width: 100%;
-  display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: 1fr auto;
-}
-
-/* Ultrawide: show right panel */
-@media (min-width: 3440px) {
-  #app {
-    grid-template-columns: var(--sidebar-width) 1fr var(--right-panel-width);
-  }
-}
-
-/* Narrow: collapse sidebar to icons */
-@media (max-width: 1200px) {
-  #app {
-    grid-template-columns: 48px 1fr;
-  }
 }
 
 ::-webkit-scrollbar {

v2/src/lib/components/Context/ContextPane.svelte

@@ -174,16 +174,17 @@
     height: 100%;
     background: var(--bg-primary);
     color: var(--text-primary);
-    font-size: 13px;
+    font-size: 0.8rem;
   }
 
   .ctx-header {
-    padding: 8px 12px;
+    padding: 0.5rem 0.75rem;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 0.75rem;
     flex-shrink: 0;
+    white-space: nowrap;
   }
 
   .ctx-header h3 {
@@ -194,13 +195,14 @@
 
   .search-input {
     flex: 1;
+    min-width: 10em;
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--border-radius);
     color: var(--text-primary);
     font-family: var(--font-mono);
-    font-size: 11px;
-    padding: 4px 8px;
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
   }
 
   .search-input:focus {
@@ -210,27 +212,28 @@
 
   .ctx-error {
     color: var(--ctp-red);
-    padding: 8px 12px;
-    font-size: 12px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
   }
 
   .ctx-body {
     flex: 1;
     overflow-y: auto;
-    padding: 8px 12px;
+    padding: 0.5rem 0.75rem;
   }
 
   .project-list {
-    margin-bottom: 12px;
+    margin-bottom: 0.75rem;
   }
 
   h4 {
-    font-size: 11px;
+    font-size: 0.7rem;
     font-weight: 600;
     color: var(--ctp-mauve);
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 6px;
+    letter-spacing: 0.03em;
+    margin-bottom: 0.375rem;
   }
 
   .project-btn {
@@ -240,8 +243,8 @@
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--border-radius);
-    padding: 6px 8px;
-    margin-bottom: 4px;
+    padding: 0.375rem 0.5rem;
+    margin-bottom: 0.25rem;
     cursor: pointer;
     text-align: left;
     color: var(--text-primary);