fix(app): give Slowest cards the ChartCard header divider

Route the "Slowest Queries" (ClickHouse page) and Slowest Events tile
titles through a titled ChartContainer instead of a bare Text, so they
get the same full-bleed card header divider as sibling chart cards and
their tables are properly bounded by the reactive container.

Remove the headerless ChartCard prop (padding-only patch) in favor of
this approach, keep the ChartCardProps interface, narrowed style type,
and enforced paddingInline divider invariant, and add ChartCard tests.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: elizabetdev

agent_docs/code_style.md

@@ -166,16 +166,22 @@ It is a bordered surface with the same header treatment as a custom dashboard
 tile (a full-bleed divider under the title). It replaces the older `ChartBox`;
 don't hand-roll a bordered `<div>`/`<Paper>` around a chart.
 
-`ChartCard` renders the card **chrome only**. It draws the header divider by
-providing `ChartContainerCardHeaderProvider`, so put a chart that renders a
-`ChartContainer` inside it (`DBTimeChart`, `DBHeatmapChart`, `DBListBarChart`,
-…). The tile-level controls (fullscreen, line/bar display switcher, kebab menu)
-belong to dashboard tiles and are intentionally **not** part of `ChartCard`.
+`ChartCard` renders the card **chrome only**. The header divider is drawn only
+when a descendant renders a `ChartContainer` with a `title` (or `toolbarItems`) —
+`ChartCard` supplies the `ChartContainerCardHeaderProvider` that switches that
+header into card mode — so put a chart that renders a `ChartContainer` inside it
+(`DBTimeChart`, `DBTableChart`, `DBHeatmapChart`, `DBListBarChart`, …). Content
+with its own heading (e.g. a bespoke table card) should still route that heading
+through a titled `ChartContainer` rather than a bare `Text`, so it gets the same
+card header — divider and top padding included — instead of sitting flush against
+the top border. The tile-level controls (fullscreen, line/bar display switcher,
+kebab menu) belong to dashboard tiles and are intentionally **not** part of
+`ChartCard`.
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `children` | `ReactNode` | The chart, usually a `DB*Chart` that renders a `ChartContainer` |
-| `style` | `CSSProperties` | Sizing/overflow override — pass a fixed `height`, or `flex: 1; height: 100%` to fill a flex row |
+| `children` | `ReactNode` | The chart, usually a `DB*Chart` (or a titled `ChartContainer`) |
+| `style` | `CSSProperties` | Sizing/overflow override — pass a fixed `height`, or `flex: 1; height: 100%` to fill a flex row (`paddingInline` is pinned to keep the divider aligned) |
 | `data-testid` | `string` | Test hook |
 
 ```tsx

packages/app/src/ClickhousePage.tsx

@@ -39,6 +39,7 @@ import { TimePicker } from '@/components/TimePicker';
 import { withAppNav } from '@/layout';
 
 import { ChartCard } from './components/charts/ChartCard';
+import ChartContainer from './components/charts/ChartContainer';
 import DBHeatmapChart from './components/DBHeatmapChart';
 import { DBSqlRowTable } from './components/DBRowTable';
 import DBTableChart from './components/DBTableChart';
@@ -796,59 +797,53 @@ function ClickhousePage() {
                   </ChartCard>
                 </Grid.Col>
                 <Grid.Col span={12}>
-                  <ChartCard
-                    style={{
-                      height: 400,
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <Text size="sm" mb="md">
-                      Slowest Queries
-                    </Text>
-                    <DBSqlRowTable
-                      renderRowDetails={row => {
-                        return (
-                          <ReactCodeMirror
-                            extensions={[clickhouseSql()]}
-                            editable={false}
-                            value={formatSql(String(row.query ?? ''))}
-                            theme={colorScheme === 'dark' ? 'dark' : 'light'}
-                            lang="sql"
-                            maxHeight="200px"
-                          />
-                        );
-                      }}
-                      config={{
-                        select: `event_time, query_kind, 
+                  <ChartCard style={{ height: 400 }}>
+                    <ChartContainer title="Slowest Queries">
+                      <DBSqlRowTable
+                        renderRowDetails={row => {
+                          return (
+                            <ReactCodeMirror
+                              extensions={[clickhouseSql()]}
+                              editable={false}
+                              value={formatSql(String(row.query ?? ''))}
+                              theme={colorScheme === 'dark' ? 'dark' : 'light'}
+                              lang="sql"
+                              maxHeight="200px"
+                            />
+                          );
+                        }}
+                        config={{
+                          select: `event_time, query_kind, 
                 read_rows,
                 formatReadableSize(memory_usage) as memory_usage,
                 query_duration_ms, 
                 query`,
-                        dateRange: searchedTimeRange,
-                        from,
-                        where: `(
+                          dateRange: searchedTimeRange,
+                          from,
+                          where: `(
                   type='ExceptionWhileProcessing' OR type='QueryFinish' 
                 )`,
-                        timestampValueExpression: 'event_time',
-                        connection,
-                        orderBy: [
-                          {
-                            valueExpression: 'query_duration_ms',
-                            ordering: 'DESC',
-                          },
-                        ],
-                        filters: [
-                          ...filters,
-                          {
-                            type: 'sql_ast',
-                            operator: '=',
-                            left: 'query_kind',
-                            right: `'Select'`,
-                          },
-                        ],
-                        limit: { limit: 100 },
-                      }}
-                    />
+                          timestampValueExpression: 'event_time',
+                          connection,
+                          orderBy: [
+                            {
+                              valueExpression: 'query_duration_ms',
+                              ordering: 'DESC',
+                            },
+                          ],
+                          filters: [
+                            ...filters,
+                            {
+                              type: 'sql_ast',
+                              operator: '=',
+                              left: 'query_kind',
+                              right: `'Select'`,
+                            },
+                          ],
+                          limit: { limit: 100 },
+                        }}
+                      />
+                    </ChartContainer>
                   </ChartCard>
                 </Grid.Col>
               </Grid>

packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx

@@ -4,12 +4,13 @@ import {
   pickSampleWeightExpressionProps,
   type TTraceSource,
 } from '@hyperdx/common-utils/dist/types';
-import { Group, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 
 import { ChartCard } from '@/components/charts/ChartCard';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 import { useServiceDashboardExpressions } from '@/serviceDashboard';
 
+import ChartContainer from './charts/ChartContainer';
 import ChartErrorState from './charts/ChartErrorState';
 import DBSqlRowTableWithSideBar from './DBSqlRowTableWithSidebar';
 
@@ -67,24 +68,27 @@ export default function SlowestEventsTile({
 
   return (
     <ChartCard style={{ height }}>
-      <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm">{title}</Text>
-        <Text size="xs">(Slower than {roundedP95}ms)</Text>
-      </Group>
-      {isLoading && !data ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          Loading Chart Data...
-        </div>
-      ) : isError ? (
-        <ChartErrorState error={error} />
-      ) : data?.data.length === 0 ? (
-        <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
-          No data found within time range.
-        </div>
-      ) : (
-        source &&
-        expressions && (
-          <>
+      <ChartContainer
+        title={<Text size="sm">{title}</Text>}
+        toolbarItems={[
+          <Text key="slower-than" size="xs">
+            (Slower than {roundedP95}ms)
+          </Text>,
+        ]}
+      >
+        {isLoading && !data ? (
+          <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+            Loading Chart Data...
+          </div>
+        ) : isError ? (
+          <ChartErrorState error={error} />
+        ) : data?.data.length === 0 ? (
+          <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
+            No data found within time range.
+          </div>
+        ) : (
+          source &&
+          expressions && (
             <DBSqlRowTableWithSideBar
               sourceId={source.id}
               config={{
@@ -134,9 +138,9 @@ export default function SlowestEventsTile({
               isLive={false}
               queryKeyPrefix="service-dashboard-slowest-transactions"
             />
-          </>
-        )
-      )}
+          )
+        )}
+      </ChartContainer>
     </ChartCard>
   );
 }

packages/app/src/components/charts/ChartCard.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, SegmentedControl } from '@mantine/core';
+import { Box, Flex, SegmentedControl, Text } from '@mantine/core';
 import type { Meta } from '@storybook/nextjs';
 
 import { ChartCard } from './ChartCard';
@@ -119,14 +119,18 @@ export const RedRow = () => {
 };
 
 /**
- * With no title and no toolbar the header row is omitted entirely, so the card
- * degrades to a plain bordered surface (no divider).
+ * Non-chart content (e.g. a table card) still routes its heading through a
+ * titled `ChartContainer` so it gets the same card header — divider included —
+ * as the chart cards above, instead of a bare `Text` that would sit flush
+ * against the top border with no divider.
  */
-export const NoHeader = () => (
+export const TableCard = () => (
   <Box style={{ width: 480, height: 260 }}>
     <ChartCard>
-      <ChartContainer>
-        <FakeChart color="var(--color-chart-green)" />
+      <ChartContainer title="Slowest Queries">
+        <Text size="sm" c="dimmed" p="sm">
+          table rows…
+        </Text>
       </ChartContainer>
     </ChartCard>
   </Box>

packages/app/src/components/charts/ChartCard.tsx

@@ -1,36 +1,52 @@
-import { Box, BoxComponentProps } from '@mantine/core';
+import { Box } from '@mantine/core';
 
 import {
   ChartContainerCardHeaderProvider,
   DASHBOARD_TILE_PADDING_INLINE,
 } from './ChartContainer';
 
+export interface ChartCardProps {
+  children: React.ReactNode;
+  /**
+   * Sizing/overflow override merged over the card defaults. Kept as plain
+   * `CSSProperties` (not Mantine's `MantineStyleProp`) because the defaults are
+   * object-spread — a resolver function or style array would be silently
+   * dropped. `paddingInline` is intentionally not honored here (see below).
+   */
+  style?: React.CSSProperties;
+  'data-testid'?: string;
+}
+
 /**
  * Card wrapper that gives a chart the same look as a tile on a custom
  * dashboard: a bordered, rounded box whose chart header renders in "card mode"
  * (centered title row + a full-bleed bottom divider under the title).
  *
  * Not dashboard-specific — use it anywhere a chart should read as a card (search
- * page, service dashboards, the ClickHouse page, etc.). It replaces the older
- * plain `ChartBox` so these surfaces share one consistent card treatment.
+ * page, service dashboards, the ClickHouse page, etc.).
+ *
+ * The header divider is only drawn when a descendant renders a `ChartContainer`
+ * with a `title` or `toolbarItems` (e.g. `DBTimeChart`, `DBTableChart`); this
+ * component just provides the context that switches that header into card mode.
+ * Content with its own heading should render it through a titled
+ * `ChartContainer` (rather than a bare `Text`) so it gets the same card header —
+ * divider included — and the top padding the header supplies.
  *
  * This is the *visual* chrome only. The dashboard tile's toolbar controls
  * (fullscreen, line/bar display switcher, kebab menu) live on the tile itself
  * and are intentionally not included here.
  *
  * Keep the horizontal padding equal to DASHBOARD_TILE_PADDING_INLINE: the card
  * header's separator is drawn full-bleed by cancelling exactly this inset, so
- * any other value would leave the divider misaligned with the card edges.
+ * any other value would leave the divider misaligned with the card edges. It is
+ * re-applied after the caller `style` so an override can't silently break the
+ * divider alignment.
  */
 export function ChartCard({
   children,
   style,
   'data-testid': dataTestId,
-}: {
-  children: React.ReactNode;
-  style?: BoxComponentProps['style'];
-  'data-testid'?: string;
-}) {
+}: ChartCardProps) {
   return (
     <Box
       data-testid={dataTestId}
@@ -47,8 +63,9 @@ export function ChartCard({
         // inset so the header divider bleeds to the card edges.
         paddingTop: 0,
         paddingBottom: 'var(--mantine-spacing-xs)',
-        paddingInline: DASHBOARD_TILE_PADDING_INLINE,
         ...style,
+        // Enforce the full-bleed divider invariant regardless of caller style.
+        paddingInline: DASHBOARD_TILE_PADDING_INLINE,
       }}
     >
       <ChartContainerCardHeaderProvider>

packages/app/src/components/charts/__tests__/ChartCard.test.tsx

@@ -0,0 +1,58 @@
+import { screen } from '@testing-library/react';
+
+import { ChartCard } from '@/components/charts/ChartCard';
+import ChartContainer from '@/components/charts/ChartContainer';
+
+// The header row (the Group wrapping the title) gets a bottom border only in
+// "card mode", which ChartCard turns on via its context provider.
+function headerRowFor(title: string) {
+  return screen.getByText(title).parentElement as HTMLElement;
+}
+
+describe('ChartCard', () => {
+  it('puts a nested titled ChartContainer into card mode so it draws the divider', () => {
+    renderWithMantine(
+      <ChartCard>
+        <ChartContainer title="Throughput">
+          <div>chart</div>
+        </ChartContainer>
+      </ChartCard>,
+    );
+
+    expect(headerRowFor('Throughput').style.borderBottom).toBe(
+      '1px solid var(--color-border)',
+    );
+  });
+
+  it('leaves a standalone ChartContainer header plain (no divider)', () => {
+    renderWithMantine(
+      <ChartContainer title="Throughput">
+        <div>chart</div>
+      </ChartContainer>,
+    );
+
+    expect(headerRowFor('Throughput').style.borderBottom).toBe('');
+  });
+
+  it('merges a caller style over the card defaults', () => {
+    renderWithMantine(
+      <ChartCard style={{ height: 321 }} data-testid="card">
+        <div>chart</div>
+      </ChartCard>,
+    );
+
+    expect(screen.getByTestId('card').style.height).toBe('321px');
+  });
+
+  it('re-applies the divider padding invariant even if a caller overrides it', () => {
+    renderWithMantine(
+      <ChartCard style={{ paddingInline: 999 }} data-testid="card">
+        <div>chart</div>
+      </ChartCard>,
+    );
+
+    // paddingInline is pinned to the tile inset regardless of caller style so
+    // the full-bleed header divider stays aligned with the card edges.
+    expect(screen.getByTestId('card').style.paddingInline).not.toBe('999px');
+  });
+});