fix: remove bogus height

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

@@ -16,8 +16,8 @@ export default function LogsBarChartDemo() {
   }).reverse()
 
   return (
-    <div className="relative w-full h-24">
-      <LogsBarChart isFullHeight data={data} />
+    <div className="w-full h-24">
+      <LogsBarChart 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 flex flex-col">
+          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col h-64">
             <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,35 +234,33 @@ export const ProjectUsageSection = () => {
                 </div>
               </div>
             </CardHeader>
-            <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>
+            <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
+                    />
+                  }
+                />
               </Loading>
             </CardContent>
           </Card>

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

@@ -70,10 +70,7 @@ export const LogsBarChart = ({
       data-testid="logs-bar-chart"
       className={cn('flex flex-col gap-y-3', isFullHeight ? 'h-full' : 'h-24')}
     >
-      <ChartContainer
-        className="block h-full aspect-auto"
-        config={chartConfig ?? defaultChartConfig}
-      >
+      <ChartContainer className="h-full" config={chartConfig ?? defaultChartConfig}>
         <RechartBarChart
           data={data}
           onMouseMove={(e: any) => {
@@ -97,7 +94,6 @@ export const LogsBarChart = ({
             dataKey="timestamp"
             interval={data.length - 2}
             tick={false}
-            height={hideDateRange ? 1 : undefined}
             axisLine={{ stroke: CHART_COLORS.AXIS }}
             tickLine={{ stroke: CHART_COLORS.AXIS }}
           />