From d62d73d4cc409e37d980896aaa1e7c70ba041305 Mon Sep 17 00:00:00 2001
From: Tom Smith <142233216+tomsmith8@users.noreply.github.com>
Date: Thu, 9 Apr 2026 12:35:59 +0100
Subject: [PATCH 1/2] Fix scroll and hover UX in search results panel

Add overflow-hidden to root container so ScrollArea can scroll, and
use sidebar-accent token for visible hover state on result rows.
---
 src/components/layout/search-results-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/search-results-panel.tsx b/src/components/layout/search-results-panel.tsx
index 67c489a..7add0ff 100644
--- a/src/components/layout/search-results-panel.tsx
+++ b/src/components/layout/search-results-panel.tsx
@@ -16,7 +16,7 @@ function NodeRow({ node }: { node: GraphNode }) {
   const nodeType = node.node_type ?? "Unknown"
 
   return (
-    <button className="flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-muted/30 transition-colors group">
+    <button className="flex items-center gap-3 px-4 py-3 w-full text-left cursor-pointer hover:bg-sidebar-accent transition-colors group">
       <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 border border-primary/15">
         <CircleDot className="h-3 w-3 text-primary/70" />
       </div>
@@ -40,7 +40,7 @@ export function SearchResultsPanel({ onClose }: { onClose: () => void }) {
   if (!searchTerm) return null
 
   return (
-    <div className="flex h-full flex-col bg-sidebar border-r border-sidebar-border w-[300px] noise-bg">
+    <div className="flex h-full flex-col overflow-hidden bg-sidebar border-r border-sidebar-border w-[300px] noise-bg">
       <div className="relative z-10 flex items-center justify-between px-4 py-3 border-b border-sidebar-border">
         <div>
           <h3 className="text-sm font-heading font-semibold tracking-wide text-sidebar-foreground">

From edc8fc1f4f4360c36707a8b0adfac37c10f1979d Mon Sep 17 00:00:00 2001
From: Tom Smith <142233216+tomsmith8@users.noreply.github.com>
Date: Thu, 9 Apr 2026 12:56:43 +0100
Subject: [PATCH 2/2] Fix panels overlapping search and search bar shifting

Panels now overlay content area instead of pushing the layout,
keeping the search bar in place. Sources auto-close when search
results appear.
---
 src/components/layout/app-layout.tsx | 53 +++++++++++++++++-----------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx
index 0347c05..1fa5f0d 100644
--- a/src/components/layout/app-layout.tsx
+++ b/src/components/layout/app-layout.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { AppSidebar } from "./app-sidebar"
 import { SourcesPanel } from "./sources-panel"
 import { SearchResultsPanel } from "./search-results-panel"
@@ -19,6 +19,18 @@ export function AppLayout() {
 
   const searchPanelOpen = !!searchTerm && hasResults
 
+  // Auto-close sources when search results appear
+  useEffect(() => {
+    if (searchPanelOpen) setSourcesOpen(false)
+  }, [searchPanelOpen])
+
+  function closeSearchResults(): void {
+    useAppStore.getState().setSearchTerm("")
+    useGraphStore.getState().setGraphData([], [])
+  }
+
+  const panelOverlay = "absolute left-0 top-0 z-10 h-full"
+
   return (
     <>
       <div className="flex h-screen w-screen overflow-hidden">
@@ -27,22 +39,7 @@ export function AppLayout() {
           onToggleSources={() => setSourcesOpen((o) => !o)}
         />
 
-        {/* Sources slide-out panel */}
-        {sourcesOpen && (
-          <SourcesPanel onClose={() => setSourcesOpen(false)} />
-        )}
-
-        {/* Search results slide-out panel */}
-        {searchPanelOpen && !sourcesOpen && (
-          <SearchResultsPanel
-            onClose={() => {
-              useAppStore.getState().setSearchTerm("")
-              useGraphStore.getState().setGraphData([], [])
-            }}
-          />
-        )}
-
-        <div className="flex flex-1 flex-col min-w-0">
+        <div className="relative flex flex-1 flex-col min-w-0">
           {/* Top bar */}
           <header className="flex h-12 shrink-0 items-center gap-3 border-b border-border/50 bg-background/80 backdrop-blur-sm px-5">
             <SearchBar />
@@ -53,10 +50,24 @@ export function AppLayout() {
             </div>
           </header>
 
-          {/* Main viewport */}
-          <main className="flex-1 overflow-hidden">
-            <Universe />
-          </main>
+          {/* Content area — panels overlay here */}
+          <div className="relative flex-1 overflow-hidden">
+            {sourcesOpen && (
+              <div className={panelOverlay}>
+                <SourcesPanel onClose={() => setSourcesOpen(false)} />
+              </div>
+            )}
+
+            {searchPanelOpen && (
+              <div className={panelOverlay}>
+                <SearchResultsPanel onClose={closeSearchResults} />
+              </div>
+            )}
+
+            <main className="h-full">
+              <Universe />
+            </main>
+          </div>
         </div>
       </div>