fix: another attempt

apps/design-system/registry/default/example/logs-bar-chart.tsx

@@ -16,8 +16,8 @@ export default function LogsBarChartDemo() {
   }).reverse()
 
   return (
-    <div className="w-full h-24">
-      <LogsBarChart data={data} />
+    <div className="relative w-full h-24">
+      <LogsBarChart isFullHeight data={data} />
     </div>
   )
 }

apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx

@@ -209,7 +209,7 @@ export const ProjectUsageSection = () => {
       </div>
       <Row maxColumns={4} minWidth={280}>
         {enabledServices.map((s) => (
-          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col h-64">
+          <Card key={s.key} className="mb-0 flex flex-col">
             <CardHeader className="flex flex-row items-end justify-between gap-2 space-y-0 pb-0 border-b-0">
               <div className="flex items-center gap-2">
                 <div className="flex flex-col">
@@ -234,33 +234,35 @@ export const ProjectUsageSection = () => {
                 </div>
               </div>
             </CardHeader>
-            <CardContent className="p-card flex-1 h-full overflow-hidden">
-              <Loading isFullHeight active={isLoading}>
-                <LogsBarChart
-                  isFullHeight
-                  data={s.data}
-                  DateTimeFormat={datetimeFormat}
-                  onBarClick={handleBarClick(s.route, s.key)}
-                  hideZeroValues={true}
-                  chartConfig={{
-                    error_count: {
-                      label: 'Errors',
-                    },
-                    warning_count: {
-                      label: 'Warnings',
-                    },
-                    ok_count: {
-                      label: 'Requests',
-                    },
-                  }}
-                  EmptyState={
-                    <NoDataPlaceholder
-                      size="small"
-                      message="No data for selected period"
-                      isFullHeight
-                    />
-                  }
-                />
+            <CardContent className="p-card overflow-hidden">
+              <Loading active={isLoading}>
+                <div className="relative h-32">
+                  <LogsBarChart
+                    isFullHeight
+                    data={s.data}
+                    DateTimeFormat={datetimeFormat}
+                    onBarClick={handleBarClick(s.route, s.key)}
+                    hideZeroValues={true}
+                    chartConfig={{
+                      error_count: {
+                        label: 'Errors',
+                      },
+                      warning_count: {
+                        label: 'Warnings',
+                      },
+                      ok_count: {
+                        label: 'Requests',
+                      },
+                    }}
+                    EmptyState={
+                      <NoDataPlaceholder
+                        size="small"
+                        message="No data for selected period"
+                        isFullHeight
+                      />
+                    }
+                  />
+                </div>
               </Loading>
             </CardContent>
           </Card>

packages/ui-patterns/src/LogsBarChart/index.tsx

@@ -70,9 +70,11 @@ export const LogsBarChart = ({
       data-testid="logs-bar-chart"
       className={cn('flex flex-col gap-y-3', isFullHeight ? 'h-full' : 'h-24')}
     >
-      <ChartContainer className="h-full" config={chartConfig ?? defaultChartConfig}>
+      <ChartContainer
+        className="block h-full aspect-auto"
+        config={chartConfig ?? defaultChartConfig}
+      >
         <RechartBarChart
-          height={isFullHeight ? undefined : 100}
           data={data}
           onMouseMove={(e: any) => {
             if (e.activeTooltipIndex !== focusDataIndex) {