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 (
<>
@@ -27,22 +39,7 @@ export function AppLayout() {
onToggleSources={() => setSourcesOpen((o) => !o)}
/>
- {/* Sources slide-out panel */}
- {sourcesOpen && (
-
setSourcesOpen(false)} />
- )}
-
- {/* Search results slide-out panel */}
- {searchPanelOpen && !sourcesOpen && (
- {
- useAppStore.getState().setSearchTerm("")
- useGraphStore.getState().setGraphData([], [])
- }}
- />
- )}
-
-
+
{/* Top bar */}
@@ -53,10 +50,24 @@ export function AppLayout() {
- {/* Main viewport */}
-
-
-
+ {/* Content area — panels overlay here */}
+
+ {sourcesOpen && (
+
+ setSourcesOpen(false)} />
+
+ )}
+
+ {searchPanelOpen && (
+
+
+
+ )}
+
+
+
+
+
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 (
-