dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-07 18:35:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): stop infrastructure usage charts using viewport height

Browse Source 
h-full on the cards resolved against ProjectLayout's main in production once topology sat in the same flex section. Use flex-1 inside the grid instead so height stays content-sized.
This commit is contained in:
Danny White committed 2026-08-21 11:32:17 +10:00
1 parent 2245acef9c
commit bdcccc0eee
1 file changed
+7 -5
Download Patch File Download Diff File Expand all files Collapse all files
apps/studio/components/interfaces/DiskManagement/ComputeAndDiskUsageCharts.tsx
+7 -5
View File
@@ -93,7 +93,9 @@ const PERCENTAGE_Y_AXIS_PROPS = {
const getUsageCardClassName = (status: UsageMetricStatus) =>
cn(
'h-full flex flex-col transition-colors',
// flex-1 equalises the two cards inside the grid. Avoid h-full: it
// resolves against ProjectLayout's viewport-sized main in production.
'flex flex-1 flex-col min-h-0 transition-colors',
status === 'warning' && 'border-warning-400 bg-warning-200/30',
status === 'negative' && 'border-destructive-400 bg-destructive-200/30'
)
@@ -164,10 +166,10 @@ export const ComputeAndDiskUsageCharts = ({ className }: { className?: string })
className
)}
>
<div id="cpu" className="scroll-mt-24 h-full min-h-0">
<div id="cpu" className="scroll-mt-24 min-h-0 flex flex-col">
<span id="ram" className="block h-0 scroll-mt-24" aria-hidden />
<span id="disk_io" className="block h-0 scroll-mt-24" aria-hidden />
<Chart isLoading={isLoading} isErrored={isError} className="h-full">
<Chart isLoading={isLoading} isErrored={isError} className="flex flex-1 flex-col min-h-0">
<ChartCard className={getUsageCardClassName(computeUsageStatus)}>
<ChartHeader align="start" className="min-h-[5.5rem]">
<ChartMetric
@@ -245,8 +247,8 @@ export const ComputeAndDiskUsageCharts = ({ className }: { className?: string })
</Chart>
</div>
<div id="disk" className="scroll-mt-24 h-full min-h-0">
<Chart isLoading={isLoading} isErrored={isError} className="h-full">
<div id="disk" className="scroll-mt-24 min-h-0 flex flex-col">
<Chart isLoading={isLoading} isErrored={isError} className="flex flex-1 flex-col min-h-0">
<ChartCard className={getUsageCardClassName(diskUsageStatus)}>
<ChartHeader align="start" className="min-h-[5.5rem]">
<ChartMetric