fix: Fix error state and table overflows (#2054)

## Summary

This PR fixes a couple of annoying overflow behaviors.

## Screenshots or video

### Search errors

#### Before

When the original query cannot be formatted, it was on one line, which did not scroll:

<img width="1831" height="652" alt="Screenshot 2026-04-03 at 3 26 48 PM" src="https://github.com/user-attachments/assets/5ce36420-3eeb-431b-9964-e8be17f2f1d6" />

#### After 

Now that same error wraps:

<img width="1831" height="673" alt="Screenshot 2026-04-03 at 3 22 19 PM" src="https://github.com/user-attachments/assets/06787d07-3579-4e78-a83e-9204de2e4587" />

### Chart Errors

#### Before

It was sometimes impossible to see the start of the error:

<img width="1712" height="1163" alt="Screenshot 2026-04-03 at 3 27 27 PM" src="https://github.com/user-attachments/assets/a4630c73-454a-4ed0-a9c0-b63ba973fa06" />

#### After 

Now the start of the error is visible and the rest can be seen by scrolling.

<img width="1707" height="1157" alt="Screenshot 2026-04-03 at 3 22 43 PM" src="https://github.com/user-attachments/assets/80f93dd7-2758-47a3-993b-b1658d80c2b4" />

### ClickHouse Slowest Queries Table

#### Before 

The table contents here overflowed the container:

<img width="1826" height="430" alt="Screenshot 2026-04-03 at 3 25 55 PM" src="https://github.com/user-attachments/assets/48847203-caa5-4410-819d-63bdc4bb9fa1" />

#### After 

Overflow is hidden:

<img width="1831" height="420" alt="Screenshot 2026-04-03 at 3 23 36 PM" src="https://github.com/user-attachments/assets/b3f4e1fb-f0f4-4919-9e3b-a0cdced0d9dc" />

### How to test locally or on Vercel

These can all be tested in the preview

### References



- Linear Issue: Closes HDX-3858 Closes HDX-3720
- Related PRs:

.changeset/gentle-waves-know.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Fix error state and table overflows

packages/app/src/ClickhousePage.tsx

@@ -784,7 +784,12 @@ function ClickhousePage() {
               </ChartBox>
             </Grid.Col>
             <Grid.Col span={12}>
-              <ChartBox style={{ height: 400 }}>
+              <ChartBox
+                style={{
+                  height: 400,
+                  overflow: 'hidden',
+                }}
+              >
                 <Text size="sm" mb="md">
                   Slowest Queries
                 </Text>

packages/app/src/DBSearchPage.tsx

@@ -2077,7 +2077,11 @@ function DBSearchPage() {
                                 whiteSpace: 'pre-wrap',
                               }}
                             >
-                              <SQLPreview data={queryError.query} formatData />
+                              <SQLPreview
+                                data={queryError.query}
+                                formatData
+                                enableLineWrapping
+                              />
                             </Code>
                           </Box>
                         )}

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

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import cx from 'classnames';
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
 import { Button, Code, Group, Modal, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -45,7 +46,14 @@ export default function ChartErrorState({
   }, [error]);
 
   return (
-    <div className="h-100 w-100 d-flex g-1 flex-column align-items-center justify-content-center text-muted overflow-auto">
+    <div
+      className={cx(
+        'h-100 w-100 d-flex g-1 flex-column align-items-center text-muted overflow-scroll',
+        {
+          'justify-content-center': variant === 'collapsible',
+        },
+      )}
+    >
       <Text ta="center" size="sm" my="sm">
         Error loading chart, please check your query or try again later.
       </Text>