From 8531064ad76d4a5ed07a1825e7109c7ca3fcd1cd Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Mon, 8 Jun 2026 14:12:47 +0100
Subject: [PATCH] chore(studio): small visual update to empty observability
 charts (#46728)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Subtle improvement to charts that cannot load data. Less floaty.

| Before | After |
|--------|--------|
| <img width="731" height="323" alt="Screenshot 2026-06-08 at 11 46 21"
src="https://github.com/user-attachments/assets/14c87766-dfe3-448d-8c9c-f3176b658d08"
/> | <img width="791" height="333" alt="Screenshot 2026-06-08 at 11 46
01"
src="https://github.com/user-attachments/assets/d0e33b91-2990-41d2-b14c-25065b1f0c12"
/> |






<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

**Style**
- Improved visual styling for chart error and loading states. Chart
placeholders now feature increased height and enhanced border
presentation with dashed borders and rounded corners, providing clearer
visual distinction when data is unavailable or unable to load.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/studio/components/ui/Charts/ChartHandler.tsx         | 2 +-
 apps/studio/components/ui/Charts/ComposedChartHandler.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/ui/Charts/ChartHandler.tsx b/apps/studio/components/ui/Charts/ChartHandler.tsx
index 480f2cfb39b..b1226ddb590 100644
--- a/apps/studio/components/ui/Charts/ChartHandler.tsx
+++ b/apps/studio/components/ui/Charts/ChartHandler.tsx
@@ -149,7 +149,7 @@ const ChartHandler = ({
 
   if (chartData === undefined) {
     return (
-      <div className="flex h-52 w-full flex-col items-center justify-center gap-y-2">
+      <div className="flex h-64 w-full flex-col items-center justify-center gap-y-2 border border-dashed rounded-md">
         <WarningIcon />
         <p className="text-xs text-foreground-lighter">Unable to load data for {label}</p>
       </div>
diff --git a/apps/studio/components/ui/Charts/ComposedChartHandler.tsx b/apps/studio/components/ui/Charts/ComposedChartHandler.tsx
index 5c9e15e32da..387edfd5701 100644
--- a/apps/studio/components/ui/Charts/ComposedChartHandler.tsx
+++ b/apps/studio/components/ui/Charts/ComposedChartHandler.tsx
@@ -273,7 +273,7 @@ const ComposedChartHandler = ({
 
   if (!combinedData) {
     return (
-      <div className="flex h-52 w-full flex-col items-center justify-center gap-y-2">
+      <div className="flex h-64 w-full flex-col items-center justify-center gap-y-2 border border-dashed rounded-md">
         <WarningIcon />
         <p className="text-xs text-foreground-lighter">Unable to load data for {label}</p>
       </div>