Improve workspace search and responsive shell

frontend/e2e/ux-followup.spec.js

@@ -11,10 +11,12 @@ test.describe('UX follow-up fixes', () => {
   test('global search stays available after opening tool sidebar views', async ({ page }) => {
     const search = page.locator('[data-global-search-input]');
     await expect(search).toBeVisible();
+    await expect(page.locator('.workspace-header [data-global-search-input]')).toBeVisible();
 
     await page.locator('.sidebar .nav-item').filter({ hasText: 'Activity' }).click();
     await expect(page.locator('.activity-root')).toBeVisible({ timeout: 10000 });
     await expect(search).toBeVisible();
+    await expect(page.locator('.sidebar [data-global-search-input]')).toBeVisible();
 
     await page.locator('.sidebar .nav-item').filter({ hasText: 'Browser Inbox' }).click();
     await expect(page.locator('.browser-inbox-root')).toBeVisible({ timeout: 10000 });
@@ -87,6 +89,22 @@ test.describe('UX follow-up fixes', () => {
     await expect(searchInput).toHaveValue('pr');
   });
 
+  test('mobile workspace layout gives content full width below the sidebar', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.reload();
+    await waitForAppReady(page);
+
+    const workspaceBox = await page.locator('.workspace-host').boundingBox();
+    const sidebarBox = await page.locator('.sidebar').boundingBox();
+    expect(workspaceBox.width).toBeGreaterThan(340);
+    expect(workspaceBox.y).toBeGreaterThan(sidebarBox.y + sidebarBox.height - 1);
+    await expect(page.locator('.workspace-header [data-global-search-input]')).toBeVisible();
+    await expect(page.getByRole('tab', { name: 'Today' })).toBeVisible();
+
+    const hasHorizontalOverflow = await page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth);
+    expect(hasHorizontalOverflow).toBe(false);
+  });
+
   test('plugin settings modal gives complex panels enough space', async ({ page }) => {
     await openPluginManager(page);
     await page.locator('.plugin-card').filter({ hasText: 'verstak.platform-test' }).getByRole('button', { name: 'Settings' }).click();

frontend/src/App.svelte

@@ -385,7 +385,7 @@
   <VaultSelection />
 {:else}
   <main>
-    <Sidebar />
+    <Sidebar showGlobalSearch={currentView !== 'workspace' && currentView !== 'workspace-empty'} />
     <CommandPalette />
 
     <section class="content-shell">
@@ -576,4 +576,14 @@
     flex-direction: column;
     padding: clamp(1rem, 2vw, 1.5rem);
   }
+
+  @media (max-width: 720px) {
+    main {
+      flex-direction: column;
+    }
+
+    .content {
+      padding: 0.75rem;
+    }
+  }
 </style>

frontend/src/lib/shell/Sidebar.svelte

@@ -6,6 +6,8 @@
   import Icon from '../ui/Icon.svelte';
   import { debug } from '../log/debug.js';
 
+  export let showGlobalSearch = true;
+
   function flog(msg) {
     App.WriteFrontendLog('Sidebar', msg);
   }
@@ -77,7 +79,7 @@
     <span class="sidebar-title">Verstak</span>
   </div>
 
-  {#if vaultOpen}
+  {#if vaultOpen && showGlobalSearch}
     <GlobalSearch />
   {/if}
 
@@ -223,4 +225,27 @@
   :global(.sidebar-error-icon) {
     color: #e94560;
   }
+
+  @media (max-width: 720px) {
+    .sidebar {
+      width: 100%;
+      min-width: 0;
+      max-height: 14rem;
+      border-right: 0;
+      border-bottom: 1px solid #0f3460;
+    }
+
+    .sidebar-header {
+      padding: 0.75rem 1rem;
+    }
+
+    .sidebar-section {
+      max-height: 5.5rem;
+      overflow: auto;
+    }
+
+    .sidebar-footer {
+      display: none;
+    }
+  }
 </style>

frontend/src/lib/shell/WorkspaceHost.svelte

@@ -1,5 +1,6 @@
 <script>
   import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';
+  import GlobalSearch from './GlobalSearch.svelte';
   import TodaySurface from './TodaySurface.svelte';
   import * as App from '../../../wailsjs/go/api/App';
   import { onDestroy, onMount } from 'svelte';
@@ -134,6 +135,9 @@
         <span class="workspace-title">{workspaceTitle}</span>
         <span class="workspace-type">{workspaceType}</span>
       </div>
+      <div class="workspace-search" aria-label="Workspace search">
+        <GlobalSearch />
+      </div>
     </div>
 
     {#if displayedTools.length > 0}
@@ -196,9 +200,9 @@
   .workspace-header {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.65rem 1rem;
     border-bottom: 1px solid #16213e;
     flex-shrink: 0;
   }
@@ -224,11 +228,38 @@
     background: #1a2a3a;
   }
 
+  .workspace-search {
+    width: min(27rem, 46vw);
+    min-width: 16rem;
+    flex-shrink: 1;
+  }
+
+  .workspace-search :global(.global-search) {
+    padding: 0;
+    border-bottom: 0;
+  }
+
+  .workspace-search :global(.global-search-box) {
+    background: #101626;
+    border-color: #243957;
+  }
+
+  .workspace-search :global(.global-search-results) {
+    left: 0;
+    right: 0;
+    top: calc(100% + 0.35rem);
+  }
+
   @media (max-width: 720px) {
     .workspace-header {
       align-items: stretch;
       flex-direction: column;
     }
+
+    .workspace-search {
+      width: 100%;
+      min-width: 0;
+    }
   }
 
   .workspace-tabs {
@@ -239,9 +270,12 @@
     background: #12122a;
     border-bottom: 1px solid #16213e;
     flex-shrink: 0;
+    overflow-x: auto;
+    scrollbar-gutter: auto;
   }
 
   .workspace-tabs button {
+    flex-shrink: 0;
     min-height: 2rem;
     padding: 0.35rem 0.8rem;
     border: 1px solid transparent;