fix(app): cell-level hover hint placement and visual parity for failure rows

Addresses three rendering issues Drew flagged on #2321 after
approval:

- Failure rows now share a single .cellButton SCSS reset with the
  success-row <Link>, so the cell wrapper renders identically
  across branches. The user-agent button defaults (padding, font,
  color, text-align, line-height) were leaking through.
- Hover hint is suppressed when action.url === null. The previous
  state showed an "Open in search" hint on a row whose click would
  only fire an error toast, which lied to the user.
- Row-level HoverCard (position="top") replaced with
  Tooltip.Floating wrapping the <tr>. The hint now follows the
  cursor at the cell rather than anchoring at row-center-top.

Tests updated: the failure-row hint test now asserts the hint is
absent; a success-row positive test was added. Both branches get
a data-shape attribute so the test assertions don't couple to the
CSS-module hash.

Author: alex-fedotyev

packages/app/src/HDXMultiSeriesTableChart.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
-import { HoverCard, Text, UnstyledButton } from '@mantine/core';
+import { Tooltip, UnstyledButton } from '@mantine/core';
 import { IconDownload, IconTextWrap } from '@tabler/icons-react';
 import {
   flexRender,
@@ -187,6 +187,7 @@ export const Table = ({
                       prefetch={false}
                       className={interactiveClassName}
                       data-testid="dashboard-table-row-action"
+                      data-shape="link"
                     >
                       {formattedValue}
                     </Link>
@@ -197,15 +198,17 @@ export const Table = ({
                 // New Tab" stay disabled (a # anchor would silently open
                 // a meaningless new tab on auxclick before our onClick
                 // handler runs). The button still surfaces the existing
-                // notification toast on left-click; the proper "muted row
-                // + warning icon" preempt state is tracked as AC8.
+                // notification toast on left-click. focusStyles.cellButton
+                // resets the user-agent button defaults (padding, font,
+                // color, text-align, line-height) so the wrapper renders
+                // identically to the success-row <Link>.
                 return (
                   <button
                     type="button"
-                    className={interactiveClassName}
+                    className={cx(interactiveClassName, focusStyles.cellButton)}
                     onClick={action.onClickError}
-                    style={{ background: 'none', border: 'none' }}
                     data-testid="dashboard-table-row-action"
+                    data-shape="button"
                   >
                     {formattedValue}
                   </button>
@@ -221,6 +224,7 @@ export const Table = ({
                       prefetch={false}
                       className={interactiveClassName}
                       data-testid="dashboard-table-row-action"
+                      data-shape="link"
                     >
                       {formattedValue}
                     </Link>
@@ -398,24 +402,24 @@ export const Table = ({
                 })}
               </tr>
             );
-            // Row-level HoverCard so the hint position stays stable as the
-            // cursor moves between cells in the same row. Mantine's
-            // HoverCard.Target clones the <tr> and merges its hover ref
-            // with the virtualizer's measureElement ref.
-            if (rowAction) {
+            // Row-level Tooltip.Floating so the hint follows the cursor
+            // and anchors near the cell the user is over, not at the row's
+            // center-top. Tooltip.Floating tracks the cursor via floating-ui
+            // and stays within the row's bounding box; one tooltip per row
+            // means no flicker as the cursor moves between cells.
+            //
+            // The hint is suppressed when rowAction.url === null because
+            // the click only fires an error toast on those rows, so showing
+            // "Open in search" would mislead the user.
+            if (rowAction && rowAction.url) {
               return (
-                <HoverCard
+                <Tooltip.Floating
                   key={virtualRow.key}
+                  label={rowAction.description}
                   withinPortal
-                  shadow="md"
-                  openDelay={250}
-                  position="top"
                 >
-                  <HoverCard.Target>{tr}</HoverCard.Target>
-                  <HoverCard.Dropdown py="xs" px="sm">
-                    <Text size="xs">{rowAction.description}</Text>
-                  </HoverCard.Dropdown>
-                </HoverCard>
+                  {tr}
+                </Tooltip.Floating>
               );
             }
             return tr;

packages/app/src/__tests__/HDXMultiSeriesTableChart.test.tsx

@@ -71,9 +71,37 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       expect(links.length).toBeGreaterThan(0);
       links.forEach(link => {
         expect(link.tagName).toBe('A');
+        expect(link.getAttribute('data-shape')).toBe('link');
         expect(link.getAttribute('href')).toContain('/search?source=src_1');
       });
     });
+
+    it('reveals the hint at the cursor when hovering a success row', async () => {
+      const getRowAction = jest.fn().mockReturnValue({
+        url: '/search?source=src_1&where=',
+        description: 'Search HyperDX Logs',
+      });
+
+      renderWithMantine(
+        <Table
+          data={baseData}
+          columns={baseColumns}
+          getRowAction={getRowAction}
+          sorting={[]}
+          onSortingChange={() => {}}
+        />,
+      );
+
+      const row = screen.getByText('web').closest('tr')!;
+      fireEvent.mouseEnter(row);
+
+      await waitFor(
+        () => {
+          expect(screen.getByText('Search HyperDX Logs')).toBeInTheDocument();
+        },
+        { timeout: 1000 },
+      );
+    });
   });
 
   describe('getRowAction failure path', () => {
@@ -99,6 +127,7 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       expect(buttons.length).toBeGreaterThan(0);
       buttons.forEach(btn => {
         expect(btn.tagName).toBe('BUTTON');
+        expect(btn.getAttribute('data-shape')).toBe('button');
         // No href anywhere, so cmd-click / middle-click / right-click
         // "Open in New Tab" can't silently open the page.
         expect(btn.hasAttribute('href')).toBe(false);
@@ -108,7 +137,7 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       expect(onClickError).toHaveBeenCalledTimes(1);
     });
 
-    it('reveals the row-level HoverCard hint when the cursor hovers the row', async () => {
+    it('does not reveal a hint when the row action has no url', async () => {
       const getRowAction = jest.fn().mockReturnValue({
         url: null,
         description: 'Search HyperDX Logs',
@@ -128,12 +157,9 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       const row = screen.getByText('web').closest('tr')!;
       fireEvent.mouseEnter(row);
 
-      await waitFor(
-        () => {
-          expect(screen.getByText('Search HyperDX Logs')).toBeInTheDocument();
-        },
-        { timeout: 1000 },
-      );
+      // Give the tooltip a chance to mount; assert it never does.
+      await new Promise(resolve => setTimeout(resolve, 250));
+      expect(screen.queryByText('Search HyperDX Logs')).not.toBeInTheDocument();
     });
   });
 
@@ -156,6 +182,7 @@ describe('HDXMultiSeriesTableChart <Table>', () => {
       const links = screen.getAllByTestId('dashboard-table-row-action');
       links.forEach(link => {
         expect(link.tagName).toBe('A');
+        expect(link.getAttribute('data-shape')).toBe('link');
         expect(link.getAttribute('href')).toContain('/search?source=legacy');
       });
     });

packages/app/styles/focus.module.scss

@@ -3,3 +3,25 @@
   outline-offset: 2px;
   border-radius: var(--mantine-radius-xs);
 }
+
+// Used by the failure-row fallback <button> in the dashboard table
+// tile cell wrapper so it renders identically to the success-row
+// <Link>. Resets the user-agent button defaults (padding, font,
+// color, text-align, line-height) that the <a> doesn't carry and
+// reuses the same focus-visible ring as .focusRing.
+.cellButton {
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  line-height: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.cellButton:focus-visible {
+  outline: 2px solid var(--color-outline-focus);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-xs);
+}