Improve Search Result Side Panel to fix various bugs (#1587)

1. Ensures that multiple scrollbars are not shown for nested panels (click row -> surrounding context -> repeat a few times)
<img width="1402" height="876" alt="scrollbars" src="https://github.com/user-attachments/assets/f41c99e5-5fcb-47fa-9c40-243dbd926291" />


2. In the same state as above, closing the panel (clicking outside) then clicking another row caused the subpanel to re-open, this isn't ideal (should open to root drawer)
3. fix issue with drawers where you can scroll, then open a nested drawer, the nested drawer would appear incorrectly
<img width="910" height="878" alt="Screenshot 2026-01-09 at 5 10 29 PM" src="https://github.com/user-attachments/assets/fd1fbc0c-4453-46fb-b310-2323ec2792e2" />




Fixes HDX-3171

Author: brandon-pereira

.changeset/fast-jokes-lay.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+various improvements to search result drawers and nesting logic

packages/app/src/components/ContextSidePanel.tsx

@@ -44,7 +44,7 @@ interface ContextSubpanelProps {
 }
 
 // Custom hook to manage nested panel state
-function useNestedPanelState(isNested: boolean) {
+export function useNestedPanelState(isNested?: boolean) {
   // Query state (URL-based) for root level
   const queryState = {
     contextRowId: useQueryState('contextRowId', parseAsString),

packages/app/src/components/DBRowSidePanel.tsx

@@ -559,7 +559,7 @@ export default function DBRowSidePanelErrorBoundary({
     <Drawer
       opened={rowId != null}
       withCloseButton={false}
-      withinPortal={!isNestedPanel}
+      withOverlay={!isNestedPanel}
       onClose={() => {
         if (!subDrawerOpen) {
           _onClose();

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -11,6 +11,7 @@ import { useSource } from '@/source';
 import TabBar from '@/TabBar';
 import { useLocalStorage } from '@/utils';
 
+import { useNestedPanelState } from './ContextSidePanel';
 import { RowDataPanel } from './DBRowDataPanel';
 import { RowOverviewPanel } from './DBRowOverviewPanel';
 import DBRowSidePanel, {
@@ -60,6 +61,7 @@ export default function DBSqlRowTableWithSideBar({
   const { data: sourceData } = useSource({ id: sourceId });
   const [rowId, setRowId] = useQueryState('rowWhere');
   const [rowSource, setRowSource] = useQueryState('rowSource');
+  const { setContextRowId, setContextRowSource } = useNestedPanelState();
 
   const onOpenSidebar = useCallback(
     (rowWhere: string) => {
@@ -73,7 +75,19 @@ export default function DBSqlRowTableWithSideBar({
   const onCloseSidebar = useCallback(() => {
     setRowId(null);
     setRowSource(null);
-  }, [setRowId, setRowSource]);
+    // When closing the main drawer, clear the nested panel state
+    // this ensures that re-opening the main drawer will not open the nested panel
+    if (!isNestedPanel) {
+      setContextRowId(null);
+      setContextRowSource(null);
+    }
+  }, [
+    setRowId,
+    setRowSource,
+    isNestedPanel,
+    setContextRowId,
+    setContextRowSource,
+  ]);
   const renderRowDetails = useCallback(
     (r: { [key: string]: unknown }) => {
       if (!sourceData) {