From 6d596843566f14355b26bfd5d7ffab090424aff9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 14 Sep 2026 01:05:19 +0000
Subject: [PATCH 1/7] feat(app): expand result rows inline on row click

Clicking a row body opened the side panel, leaving the 16px chevron as the
only way to expand inline - a poor hit target during an incident, and the
opposite of what comparable tools do.

Row clicks now toggle inline expansion. The side panel moves to a row hover
button, still stays one click away from an expanded row, and keeps receiving
row clicks while it is open so browsing row to row is unchanged. Preferences
-> Search results -> Row click restores the old behavior.

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 .changeset/witty-mangos-listen.md             |   8 +
 packages/app/src/UserPreferencesModal.tsx     |  29 ++-
 packages/app/src/components/DBRowTable.tsx    |  41 +++-
 .../DBTable/DBRowTableIconButton.tsx          |   1 +
 .../DBTable/DBRowTableRowButtons.tsx          |  19 +-
 .../app/src/components/ExpandableRowTable.tsx |   4 +-
 .../components/__tests__/DBRowTable.test.tsx  | 196 ++++++++++++++++++
 packages/app/src/useUserPreferences.tsx       |  11 +
 .../tests/e2e/components/TableComponent.ts    |  39 +++-
 .../features/correlated-metric-source.spec.ts |   5 +-
 .../search/json-add-to-filter.spec.ts         |   2 +-
 .../search/json-viewer-whitespace.spec.ts     |   2 +-
 .../tests/e2e/features/search/search.spec.ts  |  34 ++-
 .../search/select-star-error-state.spec.ts    |   2 +-
 .../search/side-panel-navigation.spec.ts      |   2 +-
 .../app/tests/e2e/features/span-links.spec.ts |   2 +-
 .../e2e/features/traces-workflow.spec.ts      |   3 +-
 .../app/tests/e2e/page-objects/SearchPage.ts  |   2 +-
 18 files changed, 379 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/witty-mangos-listen.md

diff --git a/.changeset/witty-mangos-listen.md b/.changeset/witty-mangos-listen.md
new file mode 100644
index 0000000000..10e8218f06
--- /dev/null
+++ b/.changeset/witty-mangos-listen.md
@@ -0,0 +1,8 @@
+---
+'@hyperdx/app': minor
+---
+
+Clicking a search result row now expands it inline instead of opening the side
+panel. The side panel moved to a hover button on the row (and is still one click
+away from an expanded row), row clicks keep driving it once it is open, and
+Preferences → Search results → Row click restores the old behavior.
diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index 578e784bbb..1a5a371bc1 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -16,7 +16,11 @@ import { IconFlask } from '@tabler/icons-react';
 import { OPTIONS_FONTS } from './config/fonts';
 import { useAppTheme } from './theme/ThemeProvider';
 import { isValidThemeName, themes } from './theme';
-import { UserPreferences, useUserPreferences } from './useUserPreferences';
+import {
+  DEFAULT_ROW_CLICK_ACTION,
+  UserPreferences,
+  useUserPreferences,
+} from './useUserPreferences';
 
 const OPTIONS_COLOR_MODE = [
   { label: 'System', value: 'system' },
@@ -24,6 +28,11 @@ const OPTIONS_COLOR_MODE = [
   { label: 'Dark', value: 'dark' },
 ];
 
+const OPTIONS_ROW_CLICK_ACTION = [
+  { label: 'Expand inline', value: 'expand' },
+  { label: 'Open side panel', value: 'sidePanel' },
+];
+
 // Brand theme options (generated from theme registry)
 const OPTIONS_BRAND_THEMES = Object.values(themes).map(t => ({
   label: t.displayName,
@@ -108,6 +117,24 @@ export const UserPreferencesModal = ({
           />
         </SettingContainer>
 
+        <Divider label="Search results" labelPosition="left" mt="sm" />
+        <SettingContainer
+          label="Row click"
+          description="What clicking a result row does. The chevron always expands inline."
+        >
+          <Select
+            value={userPreferences.rowClickAction ?? DEFAULT_ROW_CLICK_ACTION}
+            onChange={value =>
+              value &&
+              setUserPreference({
+                rowClickAction: value as UserPreferences['rowClickAction'],
+              })
+            }
+            data={OPTIONS_ROW_CLICK_ACTION}
+            allowDeselect={false}
+          />
+        </SettingContainer>
+
         <Divider
           label={
             <Group align="center" gap="xs">
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index f507a35e62..d06fb257e0 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -96,7 +96,10 @@ import {
   UNDEFINED_WIDTH,
 } from '@/tableUtils';
 import { FormatTime } from '@/useFormatTime';
-import { useUserPreferences } from '@/useUserPreferences';
+import {
+  DEFAULT_ROW_CLICK_ACTION,
+  useUserPreferences,
+} from '@/useUserPreferences';
 import {
   getChartColorInfo,
   getLogLevelClass,
@@ -453,9 +456,20 @@ export const RawLogTable = memo(
     );
 
     const {
-      userPreferences: { isUTC },
+      userPreferences: { isUTC, rowClickAction },
     } = useUserPreferences();
 
+    // Inline expansion is owned by the expand-button column, so tables that hide
+    // it (surrounding context, patterns) always fall back to the side panel.
+    const prefersInlineExpand =
+      showExpandButton &&
+      (rowClickAction ?? DEFAULT_ROW_CLICK_ACTION) === 'expand';
+
+    // Once the side panel is open it stays the active surface, so clicks keep
+    // moving it from row to row instead of expanding rows behind it.
+    const expandInlineOnRowClick =
+      prefersInlineExpand && highlightedLineId == null;
+
     const [columnSizeStorage, setColumnSizeStorage] = useLocalStorage<
       Record<string, number>
     >(`${tableId}-column-sizes`, {});
@@ -1186,9 +1200,23 @@ export const RawLogTable = memo(
                               [styles.isTruncated]: !wrapLinesEnabled,
                             })}
                             onClick={() => {
-                              _onRowExpandClick(row.original);
+                              if (expandInlineOnRowClick) {
+                                toggleRowExpansion(rowId);
+                              } else {
+                                _onRowExpandClick(row.original);
+                              }
                             }}
-                            aria-label="View details for log entry"
+                            aria-expanded={
+                              expandInlineOnRowClick ? isExpanded : undefined
+                            }
+                            // Deliberately distinct from the chevron's "Expand log
+                            // details" so the two hit targets stay addressable
+                            // apart in tests and assistive tech.
+                            aria-label={
+                              expandInlineOnRowClick
+                                ? `${isExpanded ? 'Collapse' : 'Expand'} log row`
+                                : 'View details for log entry'
+                            }
                           >
                             {row
                               .getVisibleCells()
@@ -1256,6 +1284,11 @@ export const RawLogTable = memo(
                                 onToggleWrap={() =>
                                   setWrapLinesEnabled(!wrapLinesEnabled)
                                 }
+                                onOpenSidePanel={
+                                  prefersInlineExpand
+                                    ? () => _onRowExpandClick(row.original)
+                                    : undefined
+                                }
                               />
                             )}
                           </button>
diff --git a/packages/app/src/components/DBTable/DBRowTableIconButton.tsx b/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
index 557e8cb43e..e861f06d23 100644
--- a/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
+++ b/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
@@ -55,6 +55,7 @@ export const DBRowTableIconButton: React.FC<DBRowTableIconButtonProps> = ({
         className={baseClasses}
         tabIndex={tabIndex}
         role="button"
+        aria-label={title}
       >
         {isActive ? <IconCheck size={iconSize} /> : children}
       </UnstyledButton>
diff --git a/packages/app/src/components/DBTable/DBRowTableRowButtons.tsx b/packages/app/src/components/DBTable/DBRowTableRowButtons.tsx
index 8c93830b53..37a3849337 100644
--- a/packages/app/src/components/DBTable/DBRowTableRowButtons.tsx
+++ b/packages/app/src/components/DBTable/DBRowTableRowButtons.tsx
@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
 import { notifications } from '@mantine/notifications';
-import { IconCopy, IconLink, IconTextWrap } from '@tabler/icons-react';
+import {
+  IconCopy,
+  IconLayoutSidebarRightExpand,
+  IconLink,
+  IconTextWrap,
+} from '@tabler/icons-react';
 
 import { RowWhereResult } from '@/hooks/useRowWhere';
 import {
@@ -19,6 +24,8 @@ interface DBRowTableRowButtonsProps {
   sourceId?: string;
   isWrapped: boolean;
   onToggleWrap: () => void;
+  /** Omitted when clicking the row already opens the side panel. */
+  onOpenSidePanel?: () => void;
 }
 
 const DBRowTableRowButtons: React.FC<DBRowTableRowButtonsProps> = ({
@@ -27,6 +34,7 @@ const DBRowTableRowButtons: React.FC<DBRowTableRowButtonsProps> = ({
   sourceId,
   isWrapped,
   onToggleWrap,
+  onOpenSidePanel,
 }) => {
   const [isCopied, setIsCopied] = useState(false);
   const [isUrlCopied, setIsUrlCopied] = useState(false);
@@ -105,6 +113,15 @@ const DBRowTableRowButtons: React.FC<DBRowTableRowButtonsProps> = ({
       >
         <IconLink size={16} />
       </DBRowTableIconButton>
+      {onOpenSidePanel && (
+        <DBRowTableIconButton
+          onClick={onOpenSidePanel}
+          variant="copy"
+          title="Open in side panel"
+        >
+          <IconLayoutSidebarRightExpand size={16} />
+        </DBRowTableIconButton>
+      )}
     </div>
   );
 };
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index de232e39d7..7632b85a30 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -63,8 +63,8 @@ export const ExpandedLogRow = memo(
                       styles.expandButton,
                     )}
                     onClick={() => openSidebar(rowId, source?.id)}
-                    title="Open in sidebar"
-                    aria-label="Open in sidebar"
+                    title="Open in side panel"
+                    aria-label="Open in side panel"
                     style={{
                       zIndex: 1,
                       fontSize: '12px',
diff --git a/packages/app/src/components/__tests__/DBRowTable.test.tsx b/packages/app/src/components/__tests__/DBRowTable.test.tsx
index 048e22c5c6..f8c5f29eef 100644
--- a/packages/app/src/components/__tests__/DBRowTable.test.tsx
+++ b/packages/app/src/components/__tests__/DBRowTable.test.tsx
@@ -1,3 +1,5 @@
+import { Provider } from 'jotai';
+import type { ReactElement } from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -7,6 +9,14 @@ import {
 } from '@/components/DBRowTable';
 import * as useChartConfigModule from '@/hooks/useChartConfig';
 import { RowWhereResult } from '@/hooks/useRowWhere';
+import { RowClickAction, UserPreferences } from '@/useUserPreferences';
+
+// The inline expanded row reads the row query params through nuqs, which needs
+// a mounted Next router.
+jest.mock('nuqs', () => ({
+  ...jest.requireActual('nuqs'),
+  useQueryState: () => [null, jest.fn()],
+}));
 
 const mockRowWhereResult: RowWhereResult = { where: '', aliasWith: [] };
 
@@ -238,6 +248,192 @@ describe('RawLogTable', () => {
     });
   });
 
+  describe('Row click behavior', () => {
+    const ROW_ID = 'Timestamp = 1';
+    const VIEWPORT_HEIGHT = 900;
+
+    // The table is virtualized and jsdom performs no layout, so every element
+    // measures 0px and the virtualizer renders no rows at all. Fake just enough
+    // geometry for one screenful. Same approach as the MetricExplorer tests.
+    let rectSpy: jest.SpyInstance;
+    let clientHeightSpy: jest.SpyInstance;
+
+    beforeAll(() => {
+      rectSpy = jest
+        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+        .mockImplementation(function (this: HTMLElement) {
+          const height =
+            this.dataset.testid === 'search-results-table'
+              ? VIEWPORT_HEIGHT
+              : 23;
+          return {
+            width: 580,
+            height,
+            top: 0,
+            left: 0,
+            right: 580,
+            bottom: height,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          };
+        });
+      clientHeightSpy = jest
+        .spyOn(HTMLElement.prototype, 'clientHeight', 'get')
+        .mockReturnValue(VIEWPORT_HEIGHT);
+    });
+
+    afterAll(() => {
+      rectSpy.mockRestore();
+      clientHeightSpy.mockRestore();
+    });
+
+    const baseProps = {
+      displayedColumns: ['col1'],
+      rows: [{ col1: 'value1' }],
+      isLoading: false,
+      dedupRows: false,
+      hasNextPage: false,
+      generateRowId: () => ({ where: ROW_ID, aliasWith: [] }),
+      getRowWhere: () => ({ where: ROW_ID, aliasWith: [] }),
+      columnTypeMap: new Map(),
+      renderRowDetails: () => <div>row details</div>,
+    };
+
+    // A fresh jotai store per render keeps the stored preference from leaking
+    // into the next test through the module-level preferences atom.
+    const renderTable = (ui: ReactElement, rowClickAction?: RowClickAction) => {
+      window.localStorage.clear();
+      if (rowClickAction) {
+        window.localStorage.setItem(
+          'hdx-user-preferences',
+          JSON.stringify({
+            colorMode: 'dark',
+            rowClickAction,
+          } satisfies Partial<UserPreferences>),
+        );
+      }
+      return renderWithMantine(<Provider>{ui}</Provider>);
+    };
+
+    it('expands the row inline when its body is clicked', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', { name: 'Expand log row' }),
+      );
+
+      expect(await screen.findByTestId(`expanded-row-${ROW_ID}`)).toBeVisible();
+      expect(onRowDetailsClick).not.toHaveBeenCalled();
+    });
+
+    it('collapses an expanded row when its body is clicked again', async () => {
+      renderTable(<RawLogTable {...baseProps} onRowDetailsClick={() => {}} />);
+
+      await userEvent.click(
+        await screen.findByRole('button', { name: 'Expand log row' }),
+      );
+      await userEvent.click(
+        await screen.findByRole('button', { name: 'Collapse log row' }),
+      );
+
+      expect(
+        screen.queryByTestId(`expanded-row-${ROW_ID}`),
+      ).not.toBeInTheDocument();
+    });
+
+    it('opens the side panel from the row hover button', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', { name: 'Open in side panel' }),
+      );
+
+      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
+      expect(
+        screen.queryByTestId(`expanded-row-${ROW_ID}`),
+      ).not.toBeInTheDocument();
+    });
+
+    it('opens the side panel on row click when the preference says so', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+        'sidePanel',
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', {
+          name: 'View details for log entry',
+        }),
+      );
+
+      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
+      expect(
+        screen.queryByTestId(`expanded-row-${ROW_ID}`),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Open in side panel' }),
+      ).not.toBeInTheDocument();
+    });
+
+    // The expanded row is rendered by the expand-button column, so tables that
+    // hide it have nowhere to put inline details.
+    it('opens the side panel on row click when the expand button is hidden', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable
+          {...baseProps}
+          showExpandButton={false}
+          onRowDetailsClick={onRowDetailsClick}
+        />,
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', {
+          name: 'View details for log entry',
+        }),
+      );
+
+      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
+    });
+
+    // With the panel open it stays the active surface, so a row click moves it
+    // rather than expanding rows behind it.
+    it('moves the open side panel on row click instead of expanding', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable
+          {...baseProps}
+          highlightedLineId="some-other-row"
+          onRowDetailsClick={onRowDetailsClick}
+        />,
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', {
+          name: 'View details for log entry',
+        }),
+      );
+
+      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
+      expect(
+        screen.queryByTestId(`expanded-row-${ROW_ID}`),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   describe('Error state', () => {
     const paginationProps = {
       displayedColumns: ['col1'],
diff --git a/packages/app/src/useUserPreferences.tsx b/packages/app/src/useUserPreferences.tsx
index 8d82240263..23f4c949ef 100644
--- a/packages/app/src/useUserPreferences.tsx
+++ b/packages/app/src/useUserPreferences.tsx
@@ -5,6 +5,11 @@ import { atomWithStorage } from 'jotai/utils';
 
 type ColorModePreference = 'light' | 'dark' | 'system';
 
+/** What clicking the body of a search result row does. */
+export type RowClickAction = 'expand' | 'sidePanel';
+
+export const DEFAULT_ROW_CLICK_ACTION: RowClickAction = 'expand';
+
 export type UserPreferences = {
   isUTC: boolean;
   timeFormat: '12h' | '24h';
@@ -12,6 +17,12 @@ export type UserPreferences = {
   colorMode: ColorModePreference;
   font: 'IBM Plex Mono' | 'Roboto Mono' | 'Inter' | 'Roboto';
   expandSidebarHeader?: boolean;
+  /**
+   * Left unset (and absent from `DEFAULT_PREFERENCES`) so existing users, whose
+   * stored preferences predate this field, fall through to
+   * `DEFAULT_ROW_CLICK_ACTION` instead of keeping the old side panel behavior.
+   */
+  rowClickAction?: RowClickAction;
 };
 
 // Legacy type for migration
diff --git a/packages/app/tests/e2e/components/TableComponent.ts b/packages/app/tests/e2e/components/TableComponent.ts
index c3e9e4cd13..a6bc36e1aa 100644
--- a/packages/app/tests/e2e/components/TableComponent.ts
+++ b/packages/app/tests/e2e/components/TableComponent.ts
@@ -54,7 +54,8 @@ export class TableComponent {
   }
 
   /**
-   * Click on a specific row
+   * Click on a specific row. On tables that support inline expansion this
+   * expands the row in place; use {@link openRowSidePanel} for the side panel.
    */
   async clickRow(index: number) {
     await this.getRow(index).click();
@@ -67,6 +68,24 @@ export class TableComponent {
     await this.firstRow.click();
   }
 
+  /**
+   * Open a row in the side panel via its hover button. Clicking the row body
+   * expands it inline instead (unless the side panel is already open, in which
+   * case a row click moves the panel to that row).
+   */
+  async openRowSidePanel(index: number) {
+    const row = this.getRow(index);
+    await row.hover();
+    await row.getByRole('button', { name: 'Open in side panel' }).click();
+  }
+
+  /**
+   * Open the first row in the side panel via its hover button.
+   */
+  async openFirstRowSidePanel() {
+    await this.openRowSidePanel(0);
+  }
+
   /**
    * Expand a row in place via its chevron button, revealing the inline expanded
    * row underneath it.
@@ -78,6 +97,24 @@ export class TableComponent {
     await this.firstExpandedRow.waitFor({ state: 'visible', timeout: 10_000 });
   }
 
+  /**
+   * Click a row's body — the large hit target covering everything but the
+   * chevron. Toggles inline expansion, so calling it twice collapses the row.
+   */
+  async clickRowBody(index: number) {
+    await this.getRow(index)
+      .getByRole('button', { name: /^(Expand|Collapse) log row$/ })
+      .click();
+  }
+
+  /**
+   * Expand a row in place by clicking its body rather than the chevron.
+   */
+  async expandRowByBodyClick(index: number) {
+    await this.clickRowBody(index);
+    await this.firstExpandedRow.waitFor({ state: 'visible', timeout: 10_000 });
+  }
+
   /**
    * All inline expanded rows currently rendered. Each carries
    * `data-testid="expanded-row-<rowWhere>"`, where rowWhere is a SQL fragment,
diff --git a/packages/app/tests/e2e/features/correlated-metric-source.spec.ts b/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
index 96143c202c..d182555d48 100644
--- a/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
+++ b/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
@@ -20,8 +20,9 @@ test.describe('Correlated Metric Source', { tag: ['@full-stack'] }, () => {
     // Search for K8s events that have k8s.pod.uid resource attribute
     await searchPage.performSearch('ResourceAttributes.k8s.pod.uid:*');
 
-    // Click on first row to open side panel
-    await searchPage.table.clickFirstRow();
+    // Open the row in the side panel via its hover button; clicking the row
+    // body expands it inline instead.
+    await searchPage.table.openFirstRowSidePanel();
 
     // Click the Infrastructure tab
     await searchPage.sidePanel.clickTab('infrastructure');
diff --git a/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts b/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
index d14011316c..bf67f2ccb5 100644
--- a/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
+++ b/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
@@ -38,7 +38,7 @@ test.describe(
 
       // Open the row, then add a filter on the nested JSON value from the
       // parsed tab. This builds JSONExtractString(Body, 'app.user.currency').
-      await searchPage.table.clickFirstRow();
+      await searchPage.table.openFirstRowSidePanel();
       await searchPage.sidePanel.addParsedJsonFieldToFilter(
         'Body',
         JSON_BODY_LOG.jsonKey,
diff --git a/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts b/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
index ebc663acc5..58cf8fa44e 100644
--- a/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
+++ b/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
@@ -10,7 +10,7 @@ test.describe('JSON Viewer WhiteSpace Toggle', { tag: ['@search'] }, () => {
     await searchPage.goto();
     await searchPage.submitEmptySearch();
     await expect(searchPage.table.firstRow).toBeVisible({ timeout: 10000 });
-    await searchPage.table.clickFirstRow();
+    await searchPage.table.openFirstRowSidePanel();
     await searchPage.sidePanel.clickTab('parsed');
   }
 
diff --git a/packages/app/tests/e2e/features/search/search.spec.ts b/packages/app/tests/e2e/features/search/search.spec.ts
index 0342d108e2..aaa7620eed 100644
--- a/packages/app/tests/e2e/features/search/search.spec.ts
+++ b/packages/app/tests/e2e/features/search/search.spec.ts
@@ -50,7 +50,7 @@ test.describe('Search', { tag: '@search' }, () => {
 
         // Use table component
         await expect(searchPage.table.firstRow).toBeVisible();
-        await searchPage.table.clickFirstRow();
+        await searchPage.table.openFirstRowSidePanel();
 
         // Verify side panel opens
         await expect(searchPage.sidePanel.tabs).toBeVisible();
@@ -86,6 +86,32 @@ test.describe('Search', { tag: '@search' }, () => {
         });
       });
     });
+
+    test('should expand a result row inline when its body is clicked', async () => {
+      await test.step('Perform search', async () => {
+        await searchPage.submitEmptySearch();
+        await expect(searchPage.table.firstRow).toBeVisible();
+      });
+
+      await test.step('Clicking the row body expands it in place', async () => {
+        await searchPage.table.expandRowByBodyClick(0);
+
+        await expect(searchPage.table.firstExpandedRow).toBeVisible();
+        await expect(searchPage.sidePanel.container).toBeHidden();
+      });
+
+      await test.step('Clicking it again collapses the row', async () => {
+        await searchPage.table.clickRowBody(0);
+
+        await expect(searchPage.table.expandedRows).toHaveCount(0);
+      });
+
+      await test.step('The row hover button still opens the side panel', async () => {
+        await searchPage.table.openFirstRowSidePanel();
+
+        await expect(searchPage.sidePanel.container).toBeVisible();
+      });
+    });
   });
 
   test.describe('Advanced Workflows', () => {
@@ -120,8 +146,8 @@ test.describe('Search', { tag: '@search' }, () => {
         const resultsTable = searchPage.getSearchResultsTable();
         await expect(resultsTable).toBeVisible();
 
-        // Click second row (index 1) using component method
-        await searchPage.table.clickRow(1);
+        // Open the second row (index 1) in the side panel
+        await searchPage.table.openRowSidePanel(1);
 
         // Verify side panel opens
         await expect(searchPage.sidePanel.container).toBeVisible();
@@ -177,7 +203,7 @@ test.describe('Search', { tag: '@search' }, () => {
           'ResourceAttributes.service.name:"api-server"',
         );
         await expect(searchPage.table.firstRow).toBeVisible();
-        await searchPage.table.clickFirstRow();
+        await searchPage.table.openFirstRowSidePanel();
         await expect(searchPage.sidePanel.tabs).toBeVisible();
       });
 
diff --git a/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts b/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
index 320536c845..82badd0bdf 100644
--- a/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
+++ b/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
@@ -32,7 +32,7 @@ test.describe(
     });
 
     test('the row side panel shows the Known Columns List hint', async () => {
-      await searchPage.table.clickFirstRow();
+      await searchPage.table.openFirstRowSidePanel();
 
       await expect(searchPage.sidePanel.container).toBeVisible();
       await expect(searchPage.sidePanel.errorState).toBeVisible();
diff --git a/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts b/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
index 6a9e5cc3ee..aeb5af1a2b 100644
--- a/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
+++ b/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
@@ -15,7 +15,7 @@ test.describe('Search side panel navigation', { tag: '@search' }, () => {
       // to traces), so the first row of an unfiltered search is a non-trace log.
       await searchPage.submitEmptySearch();
       await expect(searchPage.table.firstRow).toBeVisible();
-      await searchPage.table.clickFirstRow();
+      await searchPage.table.openFirstRowSidePanel();
       await expect(searchPage.sidePanel.tabs).toBeVisible();
     });
 
diff --git a/packages/app/tests/e2e/features/span-links.spec.ts b/packages/app/tests/e2e/features/span-links.spec.ts
index e43ea1abd1..176e90ca8d 100644
--- a/packages/app/tests/e2e/features/span-links.spec.ts
+++ b/packages/app/tests/e2e/features/span-links.spec.ts
@@ -24,7 +24,7 @@ test.describe('Span links', { tag: '@traces' }, () => {
   async function openSpanDetail(spanId: string, spanName: string) {
     await searchPage.performSearch(`SpanId:"${spanId}"`);
     await expect(searchPage.table.firstRow).toBeVisible();
-    await searchPage.table.clickFirstRow();
+    await searchPage.table.openFirstRowSidePanel();
     await expect(searchPage.sidePanel.container).toBeVisible();
     await searchPage.sidePanel.clickWaterfallSpan(spanName);
   }
diff --git a/packages/app/tests/e2e/features/traces-workflow.spec.ts b/packages/app/tests/e2e/features/traces-workflow.spec.ts
index 6e4261170e..875fb41bbc 100644
--- a/packages/app/tests/e2e/features/traces-workflow.spec.ts
+++ b/packages/app/tests/e2e/features/traces-workflow.spec.ts
@@ -48,9 +48,8 @@ test.describe('Advanced Search Workflow - Traces', { tag: '@traces' }, () => {
     });
 
     await test.step('Click on first trace result and open side panel', async () => {
-      // Use table component to click first row
       await expect(searchPage.table.firstRow).toBeVisible();
-      await searchPage.table.clickFirstRow();
+      await searchPage.table.openFirstRowSidePanel();
 
       // Verify side panel opens
       await expect(searchPage.sidePanel.container).toBeVisible();
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index bf56ede396..5209cc7998 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -197,7 +197,7 @@ export class SearchPage {
     await this.timePicker.selectRelativeTime('Last 1 days');
     await this.performSearch(`TraceId:"${traceId}"`);
     await expect(this.table.firstRow).toBeVisible();
-    await this.table.clickFirstRow();
+    await this.table.openFirstRowSidePanel();
     await expect(this.sidePanel.tabs).toBeVisible();
   }
 

From 89e61ab310c5ac624900510afa1197a5878807bb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 14 Sep 2026 01:37:23 +0000
Subject: [PATCH 2/7] fix(app): keep inline expansion when a table has no side
 panel

RawLogTable is also used by the ClickHouse dashboard's slow-query list,
which passes no onRowDetailsClick. There the side panel preference had
nothing to open, so a row click did nothing and the hover button offered
a dead action. Fall back to inline expansion when the handler is absent.

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 packages/app/src/UserPreferencesModal.tsx       |  1 +
 packages/app/src/components/DBRowTable.tsx      | 17 ++++++++++++-----
 .../components/__tests__/DBRowTable.test.tsx    | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index 1a5a371bc1..1962939952 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -123,6 +123,7 @@ export const UserPreferencesModal = ({
           description="What clicking a result row does. The chevron always expands inline."
         >
           <Select
+            data-testid="row-click-action-select"
             value={userPreferences.rowClickAction ?? DEFAULT_ROW_CLICK_ACTION}
             onChange={value =>
               value &&
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index d06fb257e0..1b252e9e6b 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -388,7 +388,7 @@ export const RawLogTable = memo(
     rows: Record<string, any>[];
     isLoading?: boolean;
     fetchNextPage?: (options?: FetchNextPageOptions | undefined) => any;
-    onRowDetailsClick: (row: Record<string, any>) => void;
+    onRowDetailsClick?: (row: Record<string, any>) => void;
     generateRowId: (row: Record<string, any>) => RowWhereResult;
     hasNextPage?: boolean;
     highlightedLineId?: string;
@@ -459,16 +459,21 @@ export const RawLogTable = memo(
       userPreferences: { isUTC, rowClickAction },
     } = useUserPreferences();
 
+    // The ClickHouse dashboard's slow-query list has no side panel to open, so
+    // inline expansion is the only thing a row click can do there.
+    const canOpenSidePanel = onRowDetailsClick != null;
+
     // Inline expansion is owned by the expand-button column, so tables that hide
     // it (surrounding context, patterns) always fall back to the side panel.
     const prefersInlineExpand =
       showExpandButton &&
-      (rowClickAction ?? DEFAULT_ROW_CLICK_ACTION) === 'expand';
+      (!canOpenSidePanel ||
+        (rowClickAction ?? DEFAULT_ROW_CLICK_ACTION) === 'expand');
 
     // Once the side panel is open it stays the active surface, so clicks keep
     // moving it from row to row instead of expanding rows behind it.
     const expandInlineOnRowClick =
-      prefersInlineExpand && highlightedLineId == null;
+      prefersInlineExpand && (!canOpenSidePanel || highlightedLineId == null);
 
     const [columnSizeStorage, setColumnSizeStorage] = useLocalStorage<
       Record<string, number>
@@ -1285,7 +1290,7 @@ export const RawLogTable = memo(
                                   setWrapLinesEnabled(!wrapLinesEnabled)
                                 }
                                 onOpenSidePanel={
-                                  prefersInlineExpand
+                                  prefersInlineExpand && canOpenSidePanel
                                     ? () => _onRowExpandClick(row.original)
                                     : undefined
                                 }
@@ -1934,7 +1939,9 @@ function DBSqlRowTableComponent({
         fetchNextPage={fetchNextPage}
         // onPropertySearchClick={onPropertySearchClick}
         hasNextPage={hasNextPage}
-        onRowDetailsClick={_onRowDetailsClick}
+        // Passed through conditionally so tables with no side panel (the
+        // ClickHouse dashboard's slow-query list) don't offer to open one.
+        onRowDetailsClick={onRowDetailsClick ? _onRowDetailsClick : undefined}
         onScroll={onScroll}
         generateRowId={getRowWhere}
         isError={isError}
diff --git a/packages/app/src/components/__tests__/DBRowTable.test.tsx b/packages/app/src/components/__tests__/DBRowTable.test.tsx
index f8c5f29eef..abc1bde579 100644
--- a/packages/app/src/components/__tests__/DBRowTable.test.tsx
+++ b/packages/app/src/components/__tests__/DBRowTable.test.tsx
@@ -408,6 +408,23 @@ describe('RawLogTable', () => {
       expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
     });
 
+    // The ClickHouse dashboard's slow-query list renders inline details with no
+    // side panel behind them.
+    it('expands inline regardless of the preference when there is no side panel', async () => {
+      renderTable(<RawLogTable {...baseProps} />, 'sidePanel');
+
+      const rowBody = await screen.findByRole('button', {
+        name: 'Expand log row',
+      });
+      expect(
+        screen.queryByRole('button', { name: 'Open in side panel' }),
+      ).not.toBeInTheDocument();
+
+      await userEvent.click(rowBody);
+
+      expect(await screen.findByTestId(`expanded-row-${ROW_ID}`)).toBeVisible();
+    });
+
     // With the panel open it stays the active surface, so a row click moves it
     // rather than expanding rows behind it.
     it('moves the open side panel on row click instead of expanding', async () => {

From eae6338bdd35fcfb6e7d6f5633e15b5b9209738a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 14 Sep 2026 05:27:46 +0000
Subject: [PATCH 3/7] fix(app): tie row-click routing to a side panel that
 actually exists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three review findings, all the same root cause — the code inferred "a side
panel is available/open" from signals that do not mean that:

- `highlightedLineId` was passed even when the panel was not mounted. Because
  `rowWhere`/`rowSource` survive a source switch, a stale `rowWhere` left the
  table highlighting a missing row and suppressing inline expansion, so the
  first click after switching source opened the panel instead of expanding.
  Both now derive from the panel element.
- `ExpandedLogRow` guarded its maximize button on `{openSidebar && ...}`, the
  result of a `useCallback` and so always truthy. On the ClickHouse dashboard's
  slow-query list, which renders no panel, the button only wrote URL params
  nothing reads. It now takes `canOpenSidePanel`, matching the row hover button.
- `clickRow`/`clickFirstRow` lost their last callers and would silently expand
  inline for a future spec reaching for the side panel. Removed in favour of
  `clickRowBody`/`openRowSidePanel`.

Also covers the preferences Select, whose stored key and option values no test
exercised.

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 .../__tests__/UserPreferencesModal.test.tsx   | 64 +++++++++++++++++++
 packages/app/src/components/DBRowTable.tsx    |  1 +
 .../components/DBSqlRowTableWithSidebar.tsx   | 29 +++++----
 .../app/src/components/ExpandableRowTable.tsx |  5 +-
 .../components/__tests__/DBRowTable.test.tsx  |  5 ++
 .../tests/e2e/components/TableComponent.ts    | 15 -----
 6 files changed, 92 insertions(+), 27 deletions(-)
 create mode 100644 packages/app/src/__tests__/UserPreferencesModal.test.tsx

diff --git a/packages/app/src/__tests__/UserPreferencesModal.test.tsx b/packages/app/src/__tests__/UserPreferencesModal.test.tsx
new file mode 100644
index 0000000000..b3685a1a38
--- /dev/null
+++ b/packages/app/src/__tests__/UserPreferencesModal.test.tsx
@@ -0,0 +1,64 @@
+import { Provider } from 'jotai';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { UserPreferencesModal } from '@/UserPreferencesModal';
+import type { UserPreferences } from '@/useUserPreferences';
+
+const STORAGE_KEY = 'hdx-user-preferences';
+
+const renderModal = (stored?: Partial<UserPreferences>) => {
+  window.localStorage.clear();
+  if (stored) {
+    window.localStorage.setItem(
+      STORAGE_KEY,
+      // `colorMode` is what marks stored preferences as already migrated.
+      JSON.stringify({ colorMode: 'dark', ...stored }),
+    );
+  }
+  return renderWithMantine(
+    <Provider>
+      <UserPreferencesModal opened onClose={() => {}} />
+    </Provider>,
+  );
+};
+
+const readStoredPreferences = (): UserPreferences =>
+  JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? '{}');
+
+describe('UserPreferencesModal', () => {
+  describe('Row click', () => {
+    it('shows the default action for users with no stored preference', () => {
+      renderModal();
+
+      expect(screen.getByTestId('row-click-action-select')).toHaveValue(
+        'Expand inline',
+      );
+    });
+
+    it('reflects a stored preference', () => {
+      renderModal({ rowClickAction: 'sidePanel' });
+
+      expect(screen.getByTestId('row-click-action-select')).toHaveValue(
+        'Open side panel',
+      );
+    });
+
+    it('stores the selected action', async () => {
+      renderModal();
+
+      await userEvent.click(screen.getByTestId('row-click-action-select'));
+      await userEvent.click(
+        await screen.findByRole('option', {
+          name: 'Open side panel',
+          hidden: true,
+        }),
+      );
+
+      expect(screen.getByTestId('row-click-action-select')).toHaveValue(
+        'Open side panel',
+      );
+      expect(readStoredPreferences().rowClickAction).toBe('sidePanel');
+    });
+  });
+});
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 1b252e9e6b..7a31fa0390 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -1309,6 +1309,7 @@ export const RawLogTable = memo(
                           rowId={rowId}
                           measureElement={rowVirtualizer.measureElement}
                           virtualIndex={virtualRow.index}
+                          canOpenSidePanel={canOpenSidePanel}
                         >
                           {renderRowDetails?.({
                             id: rowId,
diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
index 342e87e2ff..c683786711 100644
--- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
+++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
@@ -120,23 +120,30 @@ export default function DBSqlRowTableWithSideBar({
     [sourceData],
   );
 
+  // `rowWhere`/`rowSource` survive a source switch, so a stale `rowWhere` can
+  // outlive the panel it belongs to. Deriving the table's highlight from this
+  // element keeps it from highlighting a row — and from treating the panel as
+  // open, which suppresses inline expansion — while no panel is mounted.
+  const sidePanel =
+    sourceData && (rowSource === sourceId || !rowSource) ? (
+      <DBRowSidePanel
+        source={sourceData}
+        rowId={rowId ?? undefined}
+        aliasWith={aliasWith}
+        onClose={onCloseSidebar}
+        closeOnClickOutside={closeOnClickOutside}
+        keepOpenSelector={keepOpenSelector}
+      />
+    ) : null;
+
   return (
     <RowSidePanelContext value={context ?? {}}>
-      {sourceData && (rowSource === sourceId || !rowSource) && (
-        <DBRowSidePanel
-          source={sourceData}
-          rowId={rowId ?? undefined}
-          aliasWith={aliasWith}
-          onClose={onCloseSidebar}
-          closeOnClickOutside={closeOnClickOutside}
-          keepOpenSelector={keepOpenSelector}
-        />
-      )}
+      {sidePanel}
       <DBSqlRowTable
         config={config}
         sourceId={sourceId}
         onRowDetailsClick={onOpenSidebar}
-        highlightedLineId={rowId ?? undefined}
+        highlightedLineId={sidePanel ? (rowId ?? undefined) : undefined}
         enabled={enabled}
         isLive={isLive ?? true}
         queryKeyPrefix={'dbSqlRowTable'}
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index 7632b85a30..6a447caa38 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -32,6 +32,7 @@ export const ExpandedLogRow = memo(
     rowId,
     measureElement,
     virtualIndex,
+    canOpenSidePanel,
   }: {
     children: React.ReactNode;
     columnsLength: number;
@@ -40,6 +41,8 @@ export const ExpandedLogRow = memo(
     rowId: string;
     measureElement?: (element: HTMLElement | null) => void;
     virtualIndex?: number;
+    /** False on tables that render no side panel, so the URL params go nowhere. */
+    canOpenSidePanel?: boolean;
   }) => {
     const openSidebar = useSidebarOpener();
 
@@ -55,7 +58,7 @@ export const ExpandedLogRow = memo(
           <div className={cx('mx-2 mb-2 rounded', styles.expandedRowContent)}>
             <div className="position-relative">
               <div className="px-3 pt-2 position-relative">
-                {openSidebar && (
+                {canOpenSidePanel && (
                   <button
                     type="button"
                     className={cx(
diff --git a/packages/app/src/components/__tests__/DBRowTable.test.tsx b/packages/app/src/components/__tests__/DBRowTable.test.tsx
index abc1bde579..f13bcbd7c7 100644
--- a/packages/app/src/components/__tests__/DBRowTable.test.tsx
+++ b/packages/app/src/components/__tests__/DBRowTable.test.tsx
@@ -423,6 +423,11 @@ describe('RawLogTable', () => {
       await userEvent.click(rowBody);
 
       expect(await screen.findByTestId(`expanded-row-${ROW_ID}`)).toBeVisible();
+      // The expanded row's maximize button would only write URL params nothing
+      // reads, so it stays hidden here too.
+      expect(
+        screen.queryByRole('button', { name: 'Open in side panel' }),
+      ).not.toBeInTheDocument();
     });
 
     // With the panel open it stays the active surface, so a row click moves it
diff --git a/packages/app/tests/e2e/components/TableComponent.ts b/packages/app/tests/e2e/components/TableComponent.ts
index a6bc36e1aa..1df8516252 100644
--- a/packages/app/tests/e2e/components/TableComponent.ts
+++ b/packages/app/tests/e2e/components/TableComponent.ts
@@ -53,21 +53,6 @@ export class TableComponent {
     return this.getRows().last();
   }
 
-  /**
-   * Click on a specific row. On tables that support inline expansion this
-   * expands the row in place; use {@link openRowSidePanel} for the side panel.
-   */
-  async clickRow(index: number) {
-    await this.getRow(index).click();
-  }
-
-  /**
-   * Click on the first row
-   */
-  async clickFirstRow() {
-    await this.firstRow.click();
-  }
-
   /**
    * Open a row in the side panel via its hover button. Clicking the row body
    * expands it inline instead (unless the side panel is already open, in which

From 6358e0543ffc38146bbd32046f5a029b77eb8c31 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 16 Sep 2026 18:25:10 +0000
Subject: [PATCH 4/7] fix(app): keep the side panel as the default row click
 action

Inline expansion becomes opt-in rather than the new default, so nothing changes
for anyone who does not go looking for it.

`DBRowTable`'s routing already read the preference, so only the constant moves.
The fallout is in the tests: the E2E specs that reach the side panel go back to
a plain row click, which restores `clickRow`/`clickFirstRow`, and the inline
spec now seeds `rowClickAction: 'expand'` before navigating since the row hover
button and the row body's expand target only exist in that mode.

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 .changeset/witty-mangos-listen.md             | 10 ++--
 packages/app/src/UserPreferencesModal.tsx     |  2 +-
 .../__tests__/UserPreferencesModal.test.tsx   | 12 ++--
 .../components/__tests__/DBRowTable.test.tsx  | 56 +++++++++++--------
 packages/app/src/useUserPreferences.tsx       |  8 +--
 .../tests/e2e/components/TableComponent.ts    | 23 ++++++--
 .../features/correlated-metric-source.spec.ts |  5 +-
 .../search/json-add-to-filter.spec.ts         |  2 +-
 .../search/json-viewer-whitespace.spec.ts     |  2 +-
 .../tests/e2e/features/search/search.spec.ts  | 25 +++++++--
 .../search/select-star-error-state.spec.ts    |  2 +-
 .../search/side-panel-navigation.spec.ts      |  2 +-
 .../app/tests/e2e/features/span-links.spec.ts |  2 +-
 .../e2e/features/traces-workflow.spec.ts      |  3 +-
 .../app/tests/e2e/page-objects/SearchPage.ts  |  2 +-
 15 files changed, 98 insertions(+), 58 deletions(-)

diff --git a/.changeset/witty-mangos-listen.md b/.changeset/witty-mangos-listen.md
index 10e8218f06..c9ef18614f 100644
--- a/.changeset/witty-mangos-listen.md
+++ b/.changeset/witty-mangos-listen.md
@@ -2,7 +2,9 @@
 '@hyperdx/app': minor
 ---
 
-Clicking a search result row now expands it inline instead of opening the side
-panel. The side panel moved to a hover button on the row (and is still one click
-away from an expanded row), row clicks keep driving it once it is open, and
-Preferences → Search results → Row click restores the old behavior.
+Add a Preferences → Search results → Row click setting. Leave it at `Open side
+panel` (the default) for the existing behavior, or set it to `Expand inline` to
+have a row click expand the row in place — the chevron's 16px hit target is hard
+to aim at while scanning logs. With inline expansion on, the side panel moves to
+a hover button on the row, stays one click away from an expanded row, and keeps
+receiving row clicks while it is open.
diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index 1962939952..c2e34891e9 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -29,8 +29,8 @@ const OPTIONS_COLOR_MODE = [
 ];
 
 const OPTIONS_ROW_CLICK_ACTION = [
-  { label: 'Expand inline', value: 'expand' },
   { label: 'Open side panel', value: 'sidePanel' },
+  { label: 'Expand inline', value: 'expand' },
 ];
 
 // Brand theme options (generated from theme registry)
diff --git a/packages/app/src/__tests__/UserPreferencesModal.test.tsx b/packages/app/src/__tests__/UserPreferencesModal.test.tsx
index b3685a1a38..72868fb7e4 100644
--- a/packages/app/src/__tests__/UserPreferencesModal.test.tsx
+++ b/packages/app/src/__tests__/UserPreferencesModal.test.tsx
@@ -32,15 +32,15 @@ describe('UserPreferencesModal', () => {
       renderModal();
 
       expect(screen.getByTestId('row-click-action-select')).toHaveValue(
-        'Expand inline',
+        'Open side panel',
       );
     });
 
     it('reflects a stored preference', () => {
-      renderModal({ rowClickAction: 'sidePanel' });
+      renderModal({ rowClickAction: 'expand' });
 
       expect(screen.getByTestId('row-click-action-select')).toHaveValue(
-        'Open side panel',
+        'Expand inline',
       );
     });
 
@@ -50,15 +50,15 @@ describe('UserPreferencesModal', () => {
       await userEvent.click(screen.getByTestId('row-click-action-select'));
       await userEvent.click(
         await screen.findByRole('option', {
-          name: 'Open side panel',
+          name: 'Expand inline',
           hidden: true,
         }),
       );
 
       expect(screen.getByTestId('row-click-action-select')).toHaveValue(
-        'Open side panel',
+        'Expand inline',
       );
-      expect(readStoredPreferences().rowClickAction).toBe('sidePanel');
+      expect(readStoredPreferences().rowClickAction).toBe('expand');
     });
   });
 });
diff --git a/packages/app/src/components/__tests__/DBRowTable.test.tsx b/packages/app/src/components/__tests__/DBRowTable.test.tsx
index f13bcbd7c7..edc83b8872 100644
--- a/packages/app/src/components/__tests__/DBRowTable.test.tsx
+++ b/packages/app/src/components/__tests__/DBRowTable.test.tsx
@@ -316,11 +316,36 @@ describe('RawLogTable', () => {
       return renderWithMantine(<Provider>{ui}</Provider>);
     };
 
+    it('opens the side panel on row click by default', async () => {
+      const onRowDetailsClick = jest.fn();
+
+      renderTable(
+        <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+      );
+
+      await userEvent.click(
+        await screen.findByRole('button', {
+          name: 'View details for log entry',
+        }),
+      );
+
+      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
+      expect(
+        screen.queryByTestId(`expanded-row-${ROW_ID}`),
+      ).not.toBeInTheDocument();
+      // A row click already opens the panel, so the hover button would be a
+      // second way to do the same thing.
+      expect(
+        screen.queryByRole('button', { name: 'Open in side panel' }),
+      ).not.toBeInTheDocument();
+    });
+
     it('expands the row inline when its body is clicked', async () => {
       const onRowDetailsClick = jest.fn();
 
       renderTable(
         <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+        'expand',
       );
 
       await userEvent.click(
@@ -332,7 +357,10 @@ describe('RawLogTable', () => {
     });
 
     it('collapses an expanded row when its body is clicked again', async () => {
-      renderTable(<RawLogTable {...baseProps} onRowDetailsClick={() => {}} />);
+      renderTable(
+        <RawLogTable {...baseProps} onRowDetailsClick={() => {}} />,
+        'expand',
+      );
 
       await userEvent.click(
         await screen.findByRole('button', { name: 'Expand log row' }),
@@ -351,6 +379,7 @@ describe('RawLogTable', () => {
 
       renderTable(
         <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
+        'expand',
       );
 
       await userEvent.click(
@@ -363,29 +392,6 @@ describe('RawLogTable', () => {
       ).not.toBeInTheDocument();
     });
 
-    it('opens the side panel on row click when the preference says so', async () => {
-      const onRowDetailsClick = jest.fn();
-
-      renderTable(
-        <RawLogTable {...baseProps} onRowDetailsClick={onRowDetailsClick} />,
-        'sidePanel',
-      );
-
-      await userEvent.click(
-        await screen.findByRole('button', {
-          name: 'View details for log entry',
-        }),
-      );
-
-      expect(onRowDetailsClick).toHaveBeenCalledTimes(1);
-      expect(
-        screen.queryByTestId(`expanded-row-${ROW_ID}`),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByRole('button', { name: 'Open in side panel' }),
-      ).not.toBeInTheDocument();
-    });
-
     // The expanded row is rendered by the expand-button column, so tables that
     // hide it have nowhere to put inline details.
     it('opens the side panel on row click when the expand button is hidden', async () => {
@@ -397,6 +403,7 @@ describe('RawLogTable', () => {
           showExpandButton={false}
           onRowDetailsClick={onRowDetailsClick}
         />,
+        'expand',
       );
 
       await userEvent.click(
@@ -441,6 +448,7 @@ describe('RawLogTable', () => {
           highlightedLineId="some-other-row"
           onRowDetailsClick={onRowDetailsClick}
         />,
+        'expand',
       );
 
       await userEvent.click(
diff --git a/packages/app/src/useUserPreferences.tsx b/packages/app/src/useUserPreferences.tsx
index 23f4c949ef..74ef219fbc 100644
--- a/packages/app/src/useUserPreferences.tsx
+++ b/packages/app/src/useUserPreferences.tsx
@@ -8,7 +8,7 @@ type ColorModePreference = 'light' | 'dark' | 'system';
 /** What clicking the body of a search result row does. */
 export type RowClickAction = 'expand' | 'sidePanel';
 
-export const DEFAULT_ROW_CLICK_ACTION: RowClickAction = 'expand';
+export const DEFAULT_ROW_CLICK_ACTION: RowClickAction = 'sidePanel';
 
 export type UserPreferences = {
   isUTC: boolean;
@@ -18,9 +18,9 @@ export type UserPreferences = {
   font: 'IBM Plex Mono' | 'Roboto Mono' | 'Inter' | 'Roboto';
   expandSidebarHeader?: boolean;
   /**
-   * Left unset (and absent from `DEFAULT_PREFERENCES`) so existing users, whose
-   * stored preferences predate this field, fall through to
-   * `DEFAULT_ROW_CLICK_ACTION` instead of keeping the old side panel behavior.
+   * Unset until the user opts in. Stored preferences that predate this field are
+   * returned as-is rather than merged with `DEFAULT_PREFERENCES`, so readers must
+   * fall back to `DEFAULT_ROW_CLICK_ACTION`.
    */
   rowClickAction?: RowClickAction;
 };
diff --git a/packages/app/tests/e2e/components/TableComponent.ts b/packages/app/tests/e2e/components/TableComponent.ts
index 1df8516252..2d0003492e 100644
--- a/packages/app/tests/e2e/components/TableComponent.ts
+++ b/packages/app/tests/e2e/components/TableComponent.ts
@@ -54,9 +54,23 @@ export class TableComponent {
   }
 
   /**
-   * Open a row in the side panel via its hover button. Clicking the row body
-   * expands it inline instead (unless the side panel is already open, in which
-   * case a row click moves the panel to that row).
+   * Click on a specific row, which opens it in the side panel.
+   */
+  async clickRow(index: number) {
+    await this.getRow(index).click();
+  }
+
+  /**
+   * Click on the first row
+   */
+  async clickFirstRow() {
+    await this.firstRow.click();
+  }
+
+  /**
+   * Open a row in the side panel via its hover button. The button only exists
+   * once the `expand` row-click preference is set — without it a plain
+   * {@link clickRow} already opens the panel.
    */
   async openRowSidePanel(index: number) {
     const row = this.getRow(index);
@@ -84,7 +98,8 @@ export class TableComponent {
 
   /**
    * Click a row's body — the large hit target covering everything but the
-   * chevron. Toggles inline expansion, so calling it twice collapses the row.
+   * chevron. Requires the `expand` row-click preference, under which it toggles
+   * inline expansion, so calling it twice collapses the row.
    */
   async clickRowBody(index: number) {
     await this.getRow(index)
diff --git a/packages/app/tests/e2e/features/correlated-metric-source.spec.ts b/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
index d182555d48..96143c202c 100644
--- a/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
+++ b/packages/app/tests/e2e/features/correlated-metric-source.spec.ts
@@ -20,9 +20,8 @@ test.describe('Correlated Metric Source', { tag: ['@full-stack'] }, () => {
     // Search for K8s events that have k8s.pod.uid resource attribute
     await searchPage.performSearch('ResourceAttributes.k8s.pod.uid:*');
 
-    // Open the row in the side panel via its hover button; clicking the row
-    // body expands it inline instead.
-    await searchPage.table.openFirstRowSidePanel();
+    // Click on first row to open side panel
+    await searchPage.table.clickFirstRow();
 
     // Click the Infrastructure tab
     await searchPage.sidePanel.clickTab('infrastructure');
diff --git a/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts b/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
index bf67f2ccb5..d14011316c 100644
--- a/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
+++ b/packages/app/tests/e2e/features/search/json-add-to-filter.spec.ts
@@ -38,7 +38,7 @@ test.describe(
 
       // Open the row, then add a filter on the nested JSON value from the
       // parsed tab. This builds JSONExtractString(Body, 'app.user.currency').
-      await searchPage.table.openFirstRowSidePanel();
+      await searchPage.table.clickFirstRow();
       await searchPage.sidePanel.addParsedJsonFieldToFilter(
         'Body',
         JSON_BODY_LOG.jsonKey,
diff --git a/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts b/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
index 58cf8fa44e..ebc663acc5 100644
--- a/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
+++ b/packages/app/tests/e2e/features/search/json-viewer-whitespace.spec.ts
@@ -10,7 +10,7 @@ test.describe('JSON Viewer WhiteSpace Toggle', { tag: ['@search'] }, () => {
     await searchPage.goto();
     await searchPage.submitEmptySearch();
     await expect(searchPage.table.firstRow).toBeVisible({ timeout: 10000 });
-    await searchPage.table.openFirstRowSidePanel();
+    await searchPage.table.clickFirstRow();
     await searchPage.sidePanel.clickTab('parsed');
   }
 
diff --git a/packages/app/tests/e2e/features/search/search.spec.ts b/packages/app/tests/e2e/features/search/search.spec.ts
index aaa7620eed..4d957f9aaa 100644
--- a/packages/app/tests/e2e/features/search/search.spec.ts
+++ b/packages/app/tests/e2e/features/search/search.spec.ts
@@ -50,7 +50,7 @@ test.describe('Search', { tag: '@search' }, () => {
 
         // Use table component
         await expect(searchPage.table.firstRow).toBeVisible();
-        await searchPage.table.openFirstRowSidePanel();
+        await searchPage.table.clickFirstRow();
 
         // Verify side panel opens
         await expect(searchPage.sidePanel.tabs).toBeVisible();
@@ -86,6 +86,21 @@ test.describe('Search', { tag: '@search' }, () => {
         });
       });
     });
+  });
+
+  // A row click opens the side panel by default; inline expansion is opt-in.
+  test.describe('Row click set to expand inline', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.addInitScript(() => {
+        window.localStorage.setItem(
+          'hdx-user-preferences',
+          // `colorMode` is what marks stored preferences as already migrated.
+          JSON.stringify({ colorMode: 'dark', rowClickAction: 'expand' }),
+        );
+      });
+      searchPage = new SearchPage(page);
+      await searchPage.goto();
+    });
 
     test('should expand a result row inline when its body is clicked', async () => {
       await test.step('Perform search', async () => {
@@ -106,7 +121,7 @@ test.describe('Search', { tag: '@search' }, () => {
         await expect(searchPage.table.expandedRows).toHaveCount(0);
       });
 
-      await test.step('The row hover button still opens the side panel', async () => {
+      await test.step('The row hover button opens the side panel', async () => {
         await searchPage.table.openFirstRowSidePanel();
 
         await expect(searchPage.sidePanel.container).toBeVisible();
@@ -146,8 +161,8 @@ test.describe('Search', { tag: '@search' }, () => {
         const resultsTable = searchPage.getSearchResultsTable();
         await expect(resultsTable).toBeVisible();
 
-        // Open the second row (index 1) in the side panel
-        await searchPage.table.openRowSidePanel(1);
+        // Click second row (index 1) using component method
+        await searchPage.table.clickRow(1);
 
         // Verify side panel opens
         await expect(searchPage.sidePanel.container).toBeVisible();
@@ -203,7 +218,7 @@ test.describe('Search', { tag: '@search' }, () => {
           'ResourceAttributes.service.name:"api-server"',
         );
         await expect(searchPage.table.firstRow).toBeVisible();
-        await searchPage.table.openFirstRowSidePanel();
+        await searchPage.table.clickFirstRow();
         await expect(searchPage.sidePanel.tabs).toBeVisible();
       });
 
diff --git a/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts b/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
index 82badd0bdf..320536c845 100644
--- a/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
+++ b/packages/app/tests/e2e/features/search/select-star-error-state.spec.ts
@@ -32,7 +32,7 @@ test.describe(
     });
 
     test('the row side panel shows the Known Columns List hint', async () => {
-      await searchPage.table.openFirstRowSidePanel();
+      await searchPage.table.clickFirstRow();
 
       await expect(searchPage.sidePanel.container).toBeVisible();
       await expect(searchPage.sidePanel.errorState).toBeVisible();
diff --git a/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts b/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
index aeb5af1a2b..6a9e5cc3ee 100644
--- a/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
+++ b/packages/app/tests/e2e/features/search/side-panel-navigation.spec.ts
@@ -15,7 +15,7 @@ test.describe('Search side panel navigation', { tag: '@search' }, () => {
       // to traces), so the first row of an unfiltered search is a non-trace log.
       await searchPage.submitEmptySearch();
       await expect(searchPage.table.firstRow).toBeVisible();
-      await searchPage.table.openFirstRowSidePanel();
+      await searchPage.table.clickFirstRow();
       await expect(searchPage.sidePanel.tabs).toBeVisible();
     });
 
diff --git a/packages/app/tests/e2e/features/span-links.spec.ts b/packages/app/tests/e2e/features/span-links.spec.ts
index 176e90ca8d..e43ea1abd1 100644
--- a/packages/app/tests/e2e/features/span-links.spec.ts
+++ b/packages/app/tests/e2e/features/span-links.spec.ts
@@ -24,7 +24,7 @@ test.describe('Span links', { tag: '@traces' }, () => {
   async function openSpanDetail(spanId: string, spanName: string) {
     await searchPage.performSearch(`SpanId:"${spanId}"`);
     await expect(searchPage.table.firstRow).toBeVisible();
-    await searchPage.table.openFirstRowSidePanel();
+    await searchPage.table.clickFirstRow();
     await expect(searchPage.sidePanel.container).toBeVisible();
     await searchPage.sidePanel.clickWaterfallSpan(spanName);
   }
diff --git a/packages/app/tests/e2e/features/traces-workflow.spec.ts b/packages/app/tests/e2e/features/traces-workflow.spec.ts
index 875fb41bbc..6e4261170e 100644
--- a/packages/app/tests/e2e/features/traces-workflow.spec.ts
+++ b/packages/app/tests/e2e/features/traces-workflow.spec.ts
@@ -48,8 +48,9 @@ test.describe('Advanced Search Workflow - Traces', { tag: '@traces' }, () => {
     });
 
     await test.step('Click on first trace result and open side panel', async () => {
+      // Use table component to click first row
       await expect(searchPage.table.firstRow).toBeVisible();
-      await searchPage.table.openFirstRowSidePanel();
+      await searchPage.table.clickFirstRow();
 
       // Verify side panel opens
       await expect(searchPage.sidePanel.container).toBeVisible();
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index 5209cc7998..bf56ede396 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -197,7 +197,7 @@ export class SearchPage {
     await this.timePicker.selectRelativeTime('Last 1 days');
     await this.performSearch(`TraceId:"${traceId}"`);
     await expect(this.table.firstRow).toBeVisible();
-    await this.table.openFirstRowSidePanel();
+    await this.table.clickFirstRow();
     await expect(this.sidePanel.tabs).toBeVisible();
   }
 

From 8bafedef96f9b4c1b5755282cfc33413bcf8f0d8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 21 Sep 2026 06:49:01 +0000
Subject: [PATCH 5/7] fix(app): avoid a new unsafe cast in the row click
 preference select

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 packages/app/src/UserPreferencesModal.tsx       | 17 ++++++++++-------
 .../components/DBTable/RowSelectionCells.tsx    |  3 ++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index c2e34891e9..1bb8e79674 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -18,6 +18,7 @@ import { useAppTheme } from './theme/ThemeProvider';
 import { isValidThemeName, themes } from './theme';
 import {
   DEFAULT_ROW_CLICK_ACTION,
+  RowClickAction,
   UserPreferences,
   useUserPreferences,
 } from './useUserPreferences';
@@ -28,7 +29,7 @@ const OPTIONS_COLOR_MODE = [
   { label: 'Dark', value: 'dark' },
 ];
 
-const OPTIONS_ROW_CLICK_ACTION = [
+const OPTIONS_ROW_CLICK_ACTION: { label: string; value: RowClickAction }[] = [
   { label: 'Open side panel', value: 'sidePanel' },
   { label: 'Expand inline', value: 'expand' },
 ];
@@ -125,12 +126,14 @@ export const UserPreferencesModal = ({
           <Select
             data-testid="row-click-action-select"
             value={userPreferences.rowClickAction ?? DEFAULT_ROW_CLICK_ACTION}
-            onChange={value =>
-              value &&
-              setUserPreference({
-                rowClickAction: value as UserPreferences['rowClickAction'],
-              })
-            }
+            onChange={value => {
+              const option = OPTIONS_ROW_CLICK_ACTION.find(
+                o => o.value === value,
+              );
+              if (option) {
+                setUserPreference({ rowClickAction: option.value });
+              }
+            }}
             data={OPTIONS_ROW_CLICK_ACTION}
             allowDeselect={false}
           />
diff --git a/packages/app/src/components/DBTable/RowSelectionCells.tsx b/packages/app/src/components/DBTable/RowSelectionCells.tsx
index 322ae2dd69..3995623dd6 100644
--- a/packages/app/src/components/DBTable/RowSelectionCells.tsx
+++ b/packages/app/src/components/DBTable/RowSelectionCells.tsx
@@ -40,7 +40,8 @@ export const RowSelectionCell = memo(
         aria-label="Select row"
         title="Select row, shift-click to select a range"
         data-testid="row-select-checkbox"
-        // The row body is a single button that opens the side panel.
+        // The row body is a single button that opens the side panel or expands
+        // the row, depending on the `rowClickAction` preference.
         onClick={e => e.stopPropagation()}
         onChange={e =>
           onToggle(rowId, {

From 50a3a0083f8229510d9b12e704415284e39c41fd Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 21 Sep 2026 08:06:03 +0000
Subject: [PATCH 6/7] test(app): assert the expanded row offers the side panel
 button

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 .../components/__tests__/DBRowTable.test.tsx  | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/__tests__/DBRowTable.test.tsx b/packages/app/src/components/__tests__/DBRowTable.test.tsx
index edc83b8872..408fc50b2f 100644
--- a/packages/app/src/components/__tests__/DBRowTable.test.tsx
+++ b/packages/app/src/components/__tests__/DBRowTable.test.tsx
@@ -1,6 +1,6 @@
 import { Provider } from 'jotai';
 import type { ReactElement } from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {
@@ -11,11 +11,17 @@ import * as useChartConfigModule from '@/hooks/useChartConfig';
 import { RowWhereResult } from '@/hooks/useRowWhere';
 import { RowClickAction, UserPreferences } from '@/useUserPreferences';
 
+const mockSetQueryState = jest.fn();
+
 // The inline expanded row reads the row query params through nuqs, which needs
-// a mounted Next router.
+// a mounted Next router. Routing every setter through one mock lets tests assert
+// which param the expanded row's side panel button writes.
 jest.mock('nuqs', () => ({
   ...jest.requireActual('nuqs'),
-  useQueryState: () => [null, jest.fn()],
+  useQueryState: (key: string) => [
+    null,
+    (value: unknown) => mockSetQueryState(key, value),
+  ],
 }));
 
 const mockRowWhereResult: RowWhereResult = { where: '', aliasWith: [] };
@@ -352,8 +358,19 @@ describe('RawLogTable', () => {
         await screen.findByRole('button', { name: 'Expand log row' }),
       );
 
-      expect(await screen.findByTestId(`expanded-row-${ROW_ID}`)).toBeVisible();
+      const expandedRow = await screen.findByTestId(`expanded-row-${ROW_ID}`);
+      expect(expandedRow).toBeVisible();
       expect(onRowDetailsClick).not.toHaveBeenCalled();
+
+      // The expanded row keeps the side panel one click away, via URL params
+      // rather than `onRowDetailsClick`.
+      await userEvent.click(
+        within(expandedRow).getByRole('button', {
+          name: 'Open in side panel',
+        }),
+      );
+
+      expect(mockSetQueryState).toHaveBeenCalledWith('rowWhere', ROW_ID);
     });
 
     it('collapses an expanded row when its body is clicked again', async () => {

From 8667e3ac41c2f78d884328c52e02eb69f08daa9e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 21 Sep 2026 19:15:26 +0000
Subject: [PATCH 7/7] fix(app): stop expanded rows corrupting virtualized row
 heights

A row and its inline expansion are two `tr`s sharing one virtual index, and
both carried `data-index` and the virtualizer's `measureElement` ref. Since
virtual-core keys its element cache by index, the expanded `tr` took over that
index's ResizeObserver registration and cached its own height there. Collapsing
called the ref with `null`, which `measureElement` ignores, so the inflated
height stuck and nothing observed the row any more.

Each expand/collapse then shrank the render window until scrolling showed a few
rows above a screen of empty space. Wrap the pair in a `tbody` and measure that
instead, so one element maps to one virtual index.

Co-authored-by: Mike Shi <mike@hyperdx.io>
---
 .changeset/olive-pugs-arrive.md               |  11 +
 packages/app/src/components/DBRowTable.tsx    | 304 +++++++++---------
 .../app/src/components/ExpandableRowTable.tsx |   8 +-
 .../tests/e2e/components/TableComponent.ts    |  47 +++
 .../search/virtualized-row-heights.spec.ts    |  62 ++++
 5 files changed, 278 insertions(+), 154 deletions(-)
 create mode 100644 .changeset/olive-pugs-arrive.md
 create mode 100644 packages/app/tests/e2e/features/search/virtualized-row-heights.spec.ts

diff --git a/.changeset/olive-pugs-arrive.md b/.changeset/olive-pugs-arrive.md
new file mode 100644
index 0000000000..b9ea28f2d5
--- /dev/null
+++ b/.changeset/olive-pugs-arrive.md
@@ -0,0 +1,11 @@
+---
+'@hyperdx/app': patch
+---
+
+Fix search results going blank after expanding and collapsing rows. A row and
+its inline expansion are two `tr`s sharing one virtual index, and both were
+measured by the virtualizer, so the expanded row took over that index's
+ResizeObserver registration and left its height cached there after it
+collapsed. Each expand/collapse shrank the render window a little further until
+scrolling showed only a handful of rows above empty space. The row and its
+expansion are now wrapped in a `tbody` that is measured as one unit.
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index f507a35e62..292ac9da58 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -1128,161 +1128,169 @@ export const RawLogTable = memo(
                     </tr>
                   ))}
               </thead>
-              <tbody>
-                {paddingTop > 0 && (
+              {paddingTop > 0 && (
+                <tbody>
                   <tr>
                     <td colSpan={99999} style={{ height: `${paddingTop}px` }} />
                   </tr>
-                )}
-                {items.map(virtualRow => {
-                  const row = _rows[virtualRow.index] as TableRow<any>;
-                  const rowId = getRowId(row.original);
-                  const isExpanded = expandedRows[rowId] ?? false;
-                  const isRowSelected =
-                    enableRowSelection && rowSelection.isSelected(rowId);
-
-                  return (
-                    <React.Fragment key={virtualRow.key}>
-                      <tr
-                        data-testid={`table-row-${rowId}`}
-                        className={cx(styles.tableRow, {
-                          [styles.tableRow__selected]:
-                            highlightedLineId && highlightedLineId === rowId,
-                          [styles.tableRow__multiSelected]: isRowSelected,
-                        })}
-                        data-index={virtualRow.index}
-                        ref={rowVirtualizer.measureElement}
-                      >
-                        {enableRowSelection && (
-                          <RowSelectionCell
-                            rowId={rowId}
-                            isSelected={isRowSelected}
-                            onToggle={rowSelection.toggleRow}
-                          />
-                        )}
-
-                        {/* Expand button cell */}
-                        {showExpandButton && (
-                          <td
-                            className="align-top overflow-hidden"
-                            style={{ width: '40px' }}
-                          >
-                            {flexRender(
-                              row.getVisibleCells()[0].column.columnDef.cell,
-                              row.getVisibleCells()[0].getContext(),
-                            )}
-                          </td>
-                        )}
-
-                        {/* Content columns grouped back to preserve row hover/click */}
+                </tbody>
+              )}
+              {items.map(virtualRow => {
+                const row = _rows[virtualRow.index] as TableRow<any>;
+                const rowId = getRowId(row.original);
+                const isExpanded = expandedRows[rowId] ?? false;
+                const isRowSelected =
+                  enableRowSelection && rowSelection.isSelected(rowId);
+
+                return (
+                  // A row and its inline expansion are two `tr`s but one
+                  // virtual item, so the group — not either `tr` — is what the
+                  // virtualizer measures. Measuring the `tr`s directly gave
+                  // both the same `data-index`, and the expanded one took over
+                  // that index's ResizeObserver registration, then left its
+                  // height cached there after it unmounted.
+                  <tbody
+                    key={virtualRow.key}
+                    data-index={virtualRow.index}
+                    ref={rowVirtualizer.measureElement}
+                  >
+                    <tr
+                      data-testid={`table-row-${rowId}`}
+                      className={cx(styles.tableRow, {
+                        [styles.tableRow__selected]:
+                          highlightedLineId && highlightedLineId === rowId,
+                        [styles.tableRow__multiSelected]: isRowSelected,
+                      })}
+                    >
+                      {enableRowSelection && (
+                        <RowSelectionCell
+                          rowId={rowId}
+                          isSelected={isRowSelected}
+                          onToggle={rowSelection.toggleRow}
+                        />
+                      )}
+
+                      {/* Expand button cell */}
+                      {showExpandButton && (
                         <td
-                          className="align-top overflow-hidden p-0"
-                          colSpan={columns.length - (showExpandButton ? 1 : 0)}
+                          className="align-top overflow-hidden"
+                          style={{ width: '40px' }}
                         >
-                          <button
-                            type="button"
-                            className={cx(styles.rowContentButton, {
-                              [styles.isWrapped]: wrapLinesEnabled,
-                              [styles.isTruncated]: !wrapLinesEnabled,
-                            })}
-                            onClick={() => {
-                              _onRowExpandClick(row.original);
-                            }}
-                            aria-label="View details for log entry"
-                          >
-                            {row
-                              .getVisibleCells()
-                              .slice(showExpandButton ? 1 : 0) // Skip expand
-                              .map(cell => {
-                                const columnCustomClassName = (
-                                  cell.column.columnDef.meta as any
-                                )?.className;
-                                const columnSize = cell.column.getSize();
-                                const cellValue = cell.getValue<any>();
-
-                                return (
-                                  <div
-                                    key={cell.id}
-                                    className={cx(
-                                      'flex-shrink-0 overflow-hidden position-relative',
-                                      columnCustomClassName,
-                                    )}
-                                    style={{
-                                      width:
-                                        columnSize === UNDEFINED_WIDTH
-                                          ? 0
-                                          : `${columnSize}px`,
-                                      flex:
-                                        columnSize === UNDEFINED_WIDTH
-                                          ? '1 1 0'
-                                          : 'none',
-                                      minWidth:
-                                        columnSize === UNDEFINED_WIDTH
-                                          ? MIN_LAST_COLUMN_WIDTH
-                                          : undefined,
-                                    }}
-                                  >
-                                    <div className={styles.fieldTextContainer}>
-                                      <DBRowTableFieldWithPopover
-                                        key={cell.id}
-                                        cellValue={cellValue}
-                                        wrapLinesEnabled={wrapLinesEnabled}
-                                        tableContainerRef={tableContainerRef}
-                                        columnName={
-                                          (cell.column.columnDef.meta as any)
-                                            ?.column
-                                        }
-                                        isChart={
-                                          (cell.column.columnDef.meta as any)
-                                            ?.column === '__hdx_pattern_trend'
-                                        }
-                                      >
-                                        {flexRender(
-                                          cell.column.columnDef.cell,
-                                          cell.getContext(),
-                                        )}
-                                      </DBRowTableFieldWithPopover>
-                                    </div>
-                                  </div>
-                                );
-                              })}
-                            {/* Row-level copy buttons */}
-                            {getRowWhere && (
-                              <DBRowTableRowButtons
-                                row={row.original}
-                                getRowWhere={getRowWhere}
-                                sourceId={source?.id}
-                                isWrapped={wrapLinesEnabled}
-                                onToggleWrap={() =>
-                                  setWrapLinesEnabled(!wrapLinesEnabled)
-                                }
-                              />
-                            )}
-                          </button>
+                          {flexRender(
+                            row.getVisibleCells()[0].column.columnDef.cell,
+                            row.getVisibleCells()[0].getContext(),
+                          )}
                         </td>
-                      </tr>
-                      {showExpandButton && isExpanded && (
-                        <ExpandedLogRow
-                          columnsLength={
-                            columns.length + (enableRowSelection ? 1 : 0)
-                          }
-                          virtualKey={virtualRow.key.toString()}
-                          source={source}
-                          rowId={rowId}
-                          measureElement={rowVirtualizer.measureElement}
-                          virtualIndex={virtualRow.index}
-                        >
-                          {renderRowDetails?.({
-                            id: rowId,
-                            aliasWith:
-                              row.original[INTERNAL_ROW_FIELDS.ALIAS_WITH],
-                            ...row.original,
-                          })}
-                        </ExpandedLogRow>
                       )}
-                    </React.Fragment>
-                  );
-                })}
+
+                      {/* Content columns grouped back to preserve row hover/click */}
+                      <td
+                        className="align-top overflow-hidden p-0"
+                        colSpan={columns.length - (showExpandButton ? 1 : 0)}
+                      >
+                        <button
+                          type="button"
+                          className={cx(styles.rowContentButton, {
+                            [styles.isWrapped]: wrapLinesEnabled,
+                            [styles.isTruncated]: !wrapLinesEnabled,
+                          })}
+                          onClick={() => {
+                            _onRowExpandClick(row.original);
+                          }}
+                          aria-label="View details for log entry"
+                        >
+                          {row
+                            .getVisibleCells()
+                            .slice(showExpandButton ? 1 : 0) // Skip expand
+                            .map(cell => {
+                              const columnCustomClassName = (
+                                cell.column.columnDef.meta as any
+                              )?.className;
+                              const columnSize = cell.column.getSize();
+                              const cellValue = cell.getValue<any>();
+
+                              return (
+                                <div
+                                  key={cell.id}
+                                  className={cx(
+                                    'flex-shrink-0 overflow-hidden position-relative',
+                                    columnCustomClassName,
+                                  )}
+                                  style={{
+                                    width:
+                                      columnSize === UNDEFINED_WIDTH
+                                        ? 0
+                                        : `${columnSize}px`,
+                                    flex:
+                                      columnSize === UNDEFINED_WIDTH
+                                        ? '1 1 0'
+                                        : 'none',
+                                    minWidth:
+                                      columnSize === UNDEFINED_WIDTH
+                                        ? MIN_LAST_COLUMN_WIDTH
+                                        : undefined,
+                                  }}
+                                >
+                                  <div className={styles.fieldTextContainer}>
+                                    <DBRowTableFieldWithPopover
+                                      key={cell.id}
+                                      cellValue={cellValue}
+                                      wrapLinesEnabled={wrapLinesEnabled}
+                                      tableContainerRef={tableContainerRef}
+                                      columnName={
+                                        (cell.column.columnDef.meta as any)
+                                          ?.column
+                                      }
+                                      isChart={
+                                        (cell.column.columnDef.meta as any)
+                                          ?.column === '__hdx_pattern_trend'
+                                      }
+                                    >
+                                      {flexRender(
+                                        cell.column.columnDef.cell,
+                                        cell.getContext(),
+                                      )}
+                                    </DBRowTableFieldWithPopover>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          {/* Row-level copy buttons */}
+                          {getRowWhere && (
+                            <DBRowTableRowButtons
+                              row={row.original}
+                              getRowWhere={getRowWhere}
+                              sourceId={source?.id}
+                              isWrapped={wrapLinesEnabled}
+                              onToggleWrap={() =>
+                                setWrapLinesEnabled(!wrapLinesEnabled)
+                              }
+                            />
+                          )}
+                        </button>
+                      </td>
+                    </tr>
+                    {showExpandButton && isExpanded && (
+                      <ExpandedLogRow
+                        columnsLength={
+                          columns.length + (enableRowSelection ? 1 : 0)
+                        }
+                        virtualKey={virtualRow.key.toString()}
+                        source={source}
+                        rowId={rowId}
+                      >
+                        {renderRowDetails?.({
+                          id: rowId,
+                          aliasWith:
+                            row.original[INTERNAL_ROW_FIELDS.ALIAS_WITH],
+                          ...row.original,
+                        })}
+                      </ExpandedLogRow>
+                    )}
+                  </tbody>
+                );
+              })}
+              <tbody>
                 <tr>
                   <td colSpan={800}>
                     <div
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index de232e39d7..ab1251cd02 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -30,26 +30,22 @@ export const ExpandedLogRow = memo(
     virtualKey,
     source,
     rowId,
-    measureElement,
-    virtualIndex,
   }: {
     children: React.ReactNode;
     columnsLength: number;
     virtualKey: string;
     source?: TSource;
     rowId: string;
-    measureElement?: (element: HTMLElement | null) => void;
-    virtualIndex?: number;
   }) => {
     const openSidebar = useSidebarOpener();
 
     return (
+      // Deliberately not measured by the virtualizer: the enclosing `tbody` is
+      // the element registered for this row's virtual index.
       <tr
         data-testid={`expanded-row-${rowId}`}
         key={`${virtualKey}-expanded`}
         className={styles.expandedRow}
-        data-index={virtualIndex}
-        ref={measureElement}
       >
         <td colSpan={columnsLength} className="p-0 border-0">
           <div className={cx('mx-2 mb-2 rounded', styles.expandedRowContent)}>
diff --git a/packages/app/tests/e2e/components/TableComponent.ts b/packages/app/tests/e2e/components/TableComponent.ts
index c3e9e4cd13..f854e4516e 100644
--- a/packages/app/tests/e2e/components/TableComponent.ts
+++ b/packages/app/tests/e2e/components/TableComponent.ts
@@ -78,6 +78,53 @@ export class TableComponent {
     await this.firstExpandedRow.waitFor({ state: 'visible', timeout: 10_000 });
   }
 
+  /**
+   * Collapse a row expanded by {@link expandRow}, via the same chevron.
+   */
+  async collapseRow(index: number) {
+    await this.getRow(index)
+      .getByRole('button', { name: 'Collapse log details' })
+      .click();
+  }
+
+  /**
+   * Scroll the virtualized container to an absolute offset.
+   */
+  async scrollTo(top: number) {
+    await this.tableContainer.evaluate(
+      (el, offset) => el.scrollTo({ top: offset }),
+      top,
+    );
+  }
+
+  /**
+   * Layout readings for the virtualized scroll container.
+   *
+   * `visibleGapPx` is the empty space between the bottom of the last rendered
+   * row and the bottom of the viewport. While rows remain below, a healthy
+   * table overfills the viewport and this is negative; it turns positive when
+   * the virtualizer holds stale row heights and stops rendering enough rows to
+   * cover the screen.
+   */
+  async getVirtualizationMetrics() {
+    return this.tableContainer.evaluate(el => {
+      const rows = el.querySelectorAll('[data-testid^="table-row-"]');
+      const last = rows[rows.length - 1];
+      return {
+        renderedRows: rows.length,
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+        visibleGapPx: Math.round(
+          el.getBoundingClientRect().bottom -
+            (last ? last.getBoundingClientRect().bottom : 0),
+        ),
+        remainingBelowPx: Math.round(
+          el.scrollHeight - el.scrollTop - el.clientHeight,
+        ),
+      };
+    });
+  }
+
   /**
    * All inline expanded rows currently rendered. Each carries
    * `data-testid="expanded-row-<rowWhere>"`, where rowWhere is a SQL fragment,
diff --git a/packages/app/tests/e2e/features/search/virtualized-row-heights.spec.ts b/packages/app/tests/e2e/features/search/virtualized-row-heights.spec.ts
new file mode 100644
index 0000000000..4008e2240d
--- /dev/null
+++ b/packages/app/tests/e2e/features/search/virtualized-row-heights.spec.ts
@@ -0,0 +1,62 @@
+import { SearchPage } from '../../page-objects/SearchPage';
+import { expect, test } from '../../utils/base-test';
+
+test.use({ viewport: { width: 1280, height: 900 } });
+
+test.describe('Virtualized row heights', { tag: '@search' }, () => {
+  let searchPage: SearchPage;
+
+  test.beforeEach(async ({ page }) => {
+    searchPage = new SearchPage(page);
+    await searchPage.goto();
+    await searchPage.submitEmptySearch();
+    await expect(searchPage.table.firstRow).toBeVisible();
+  });
+
+  // An expanded row used to take over its row's slot in the virtualizer's
+  // measurement cache and leave its height behind when it collapsed. Every
+  // expand/collapse shrank the render window until the viewport went blank.
+  test('collapsing an expanded row restores the table height', async () => {
+    const before = await searchPage.table.getVirtualizationMetrics();
+    expect(before.renderedRows).toBeGreaterThan(20);
+
+    for (const index of [0, 1, 2]) {
+      await searchPage.table.expandRow(index);
+      await expect(searchPage.table.firstExpandedRow).toBeVisible();
+
+      await searchPage.table.collapseRow(index);
+      await expect(searchPage.table.expandedRows).toHaveCount(0);
+
+      await expect
+        .poll(async () => {
+          const m = await searchPage.table.getVirtualizationMetrics();
+          return m.renderedRows;
+        })
+        .toBe(before.renderedRows);
+    }
+
+    const after = await searchPage.table.getVirtualizationMetrics();
+    expect(after.scrollHeight).toBeLessThanOrEqual(before.scrollHeight + 20);
+  });
+
+  test('scrolling after expanding keeps the viewport filled', async () => {
+    for (const index of [0, 1, 2]) {
+      await searchPage.table.expandRow(index);
+      await expect(searchPage.table.firstExpandedRow).toBeVisible();
+      await searchPage.table.collapseRow(index);
+      await expect(searchPage.table.expandedRows).toHaveCount(0);
+    }
+
+    for (const top of [300, 700, 1200]) {
+      await searchPage.table.scrollTo(top);
+
+      await expect
+        .poll(async () => {
+          const m = await searchPage.table.getVirtualizationMetrics();
+          // Rows still below, so the rendered window must cover the viewport.
+          return m.remainingBelowPx > 0 ? m.visibleGapPx : 0;
+        })
+        .toBeLessThanOrEqual(0);
+    }
+  });
+});