diff --git a/.changeset/silver-rings-ring.md b/.changeset/silver-rings-ring.md
new file mode 100644
index 000000000..8ab666625
--- /dev/null
+++ b/.changeset/silver-rings-ring.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Fix a couple of visual bugs in Chart titles
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
index 210f32f6d..41211f421 100644
--- a/packages/app/src/ClickhousePage.tsx
+++ b/packages/app/src/ClickhousePage.tsx
@@ -16,6 +16,7 @@ import {
   Grid,
   Group,
   SegmentedControl,
+  Stack,
   Tabs,
   Text,
   Tooltip,
@@ -196,14 +197,14 @@ function InfrastructureTab({
         <ChartBox style={{ height: 400 }}>
           <DBTimeChart
             title={
-              <>
+              <Stack gap={0}>
                 <Text size="sm" mb="xs">
                   Network
                 </Text>
                 <Text size="xs" mb="sm">
                   Network activity for the entire machine, not only Clickhouse.
                 </Text>
-              </>
+              </Stack>
             }
             config={{
               select: [
@@ -357,7 +358,7 @@ function InsertsTab({
         <ChartBox style={{ height: 400 }}>
           <DBTableChart
             title={
-              <>
+              <Stack gap={0}>
                 <Text size="sm" mb="sm">
                   Active Parts Per Partition
                 </Text>
@@ -366,7 +367,7 @@ function InsertsTab({
                   throttle inserts after 1,000 parts per partition and stop
                   inserts at 3,000 parts per partition.
                 </Text>
-              </>
+              </Stack>
             }
             config={{
               dateRange: searchedTimeRange,
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 90f1c0818..777a34e15 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -225,11 +225,12 @@ const Tile = forwardRef(
     }, [alert]);
 
     const hoverToolbar = useMemo(() => {
-      return hovered ? (
+      return (
         <Flex
           gap="0px"
           onMouseDown={e => e.stopPropagation()}
           key="hover-toolbar"
+          style={{ visibility: hovered ? 'visible' : 'hidden' }}
         >
           {(chart.config.displayType === DisplayType.Line ||
             chart.config.displayType === DisplayType.StackedBar) && (
@@ -286,8 +287,6 @@ const Tile = forwardRef(
             <IconTrash size={14} />
           </Button>
         </Flex>
-      ) : (
-        <Box h={22} key="hover-empty-box" />
       );
     }, [
       alert,
diff --git a/packages/app/src/components/charts/ChartContainer.tsx b/packages/app/src/components/charts/ChartContainer.tsx
index 3d6fd6054..ea0fd569e 100644
--- a/packages/app/src/components/charts/ChartContainer.tsx
+++ b/packages/app/src/components/charts/ChartContainer.tsx
@@ -16,9 +16,21 @@ function ChartContainer({
   return (
     <Stack h="100%" w="100%" style={{ flexGrow: 1 }}>
       {(!!title || !!toolbarItems?.length) && (
-        <Group justify="space-between" align="start">
-          {title || <span />}
-          {toolbarItems && <Group>{toolbarItems}</Group>}
+        <Group justify="space-between" align="start" wrap="nowrap">
+          <span
+            style={{
+              flex: 1,
+              flexShrink: 1,
+              overflow: 'hidden',
+            }}
+          >
+            {title}
+          </span>
+          {toolbarItems && (
+            <Group flex={0} wrap="nowrap">
+              {toolbarItems}
+            </Group>
+          )}
         </Group>
       )}
       {disableReactiveContainer ? (
diff --git a/packages/app/src/components/charts/DisplaySwitcher.tsx b/packages/app/src/components/charts/DisplaySwitcher.tsx
index a60e06872..b75acf8c7 100644
--- a/packages/app/src/components/charts/DisplaySwitcher.tsx
+++ b/packages/app/src/components/charts/DisplaySwitcher.tsx
@@ -18,7 +18,12 @@ function DisplaySwitcher<T extends string>({
   options,
 }: DisplaySwitcherProps<T>) {
   return (
-    <Group className="bg-muted px-2 py-2 rounded fs-8" align="center" gap={0}>
+    <Group
+      className="bg-muted px-2 py-2 rounded fs-8"
+      align="center"
+      gap={0}
+      wrap="nowrap"
+    >
       {options.map(({ icon, label, value: optionValue, disabled }) => (
         <Tooltip label={label} key={optionValue}>
           <ActionIcon