fix broken retention page

apps/dashboard/src/components/report/chart/ReportAreaChart.tsx

@@ -4,6 +4,7 @@ import { useNumber } from '@/hooks/useNumerFormatter';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import type { IChartData } from '@/trpc/client';
+import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import {
   Area,
@@ -33,6 +34,7 @@ export function ReportAreaChart({ data }: ReportAreaChartProps) {
 
   return (
     <>
+      <div className={cn(editMode && 'card p-4')}>
         <ResponsiveContainer>
           {({ width, height }) => (
             <AreaChart width={width} height={height} data={rechartData}>
@@ -101,6 +103,7 @@ export function ReportAreaChart({ data }: ReportAreaChartProps) {
             </AreaChart>
           )}
         </ResponsiveContainer>
+      </div>
       {editMode && (
         <ReportTable
           data={data}

apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx

@@ -4,6 +4,7 @@ import { useNumber } from '@/hooks/useNumerFormatter';
 import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import type { IChartData } from '@/trpc/client';
+import { cn } from '@/utils/cn';
 import { getChartColor, theme } from '@/utils/theme';
 import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 
@@ -40,6 +41,7 @@ export function ReportHistogramChart({ data }: ReportHistogramChartProps) {
 
   return (
     <>
+      <div className={cn(editMode && 'card p-4')}>
         <ResponsiveContainer>
           {({ width, height }) => (
             <BarChart width={width} height={height} data={rechartData}>
@@ -91,6 +93,7 @@ export function ReportHistogramChart({ data }: ReportHistogramChartProps) {
             </BarChart>
           )}
         </ResponsiveContainer>
+      </div>
       {editMode && (
         <ReportTable
           data={data}

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -7,6 +7,7 @@ import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import { api } from '@/trpc/client';
 import type { IChartData } from '@/trpc/client';
+import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
 import { isSameDay, isSameHour, isSameMonth } from 'date-fns';
 import { SplineIcon } from 'lucide-react';
@@ -127,6 +128,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
 
   return (
     <>
+      <div className={cn(editMode && 'card p-4')}>
         <ResponsiveContainer>
           {({ width, height }) => (
             <ComposedChart width={width} height={height} data={rechartData}>
@@ -280,6 +282,7 @@ export function ReportLineChart({ data }: ReportLineChartProps) {
             </ComposedChart>
           )}
         </ResponsiveContainer>
+      </div>
       {editMode && (
         <ReportTable
           data={data}

apps/dashboard/src/components/report/chart/ResponsiveContainer.tsx

@@ -1,14 +1,10 @@
-import { cn } from '@/utils/cn';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { useChartContext } from './ChartProvider';
-
 interface ResponsiveContainerProps {
   children: (props: { width: number; height: number }) => React.ReactNode;
 }
 
 export function ResponsiveContainer({ children }: ResponsiveContainerProps) {
-  const { editMode } = useChartContext();
   const maxHeight = 300;
   const minHeight = 200;
   return (
@@ -17,17 +13,13 @@ export function ResponsiveContainer({ children }: ResponsiveContainerProps) {
         maxHeight,
         minHeight,
       }}
-      className={cn('aspect-video w-full max-sm:-mx-3', editMode && 'card p-4')}
+      className={'aspect-video w-full max-sm:-mx-3'}
     >
       <AutoSizer disableHeight>
         {({ width }) =>
           children({
             width,
-            height: Math.min(
+            height: Math.min(maxHeight, width * 0.5625),
-              Math.max(width * 0.5625, minHeight),
-              // we add p-4 (16px) padding in edit mode
-              editMode ? maxHeight - 16 : maxHeight
-            ),
           })
         }
       </AutoSizer>