Improve metrics page chart sizing on Safari

Author: N2D4

.gitignore

@@ -2,6 +2,9 @@
 *.untracked.*
 
 
+*.cpuprofile
+
+
 
 .vercel
 

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx

@@ -31,7 +31,7 @@ export function LineChartDisplay({
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={config.chart} className='w-full max-h-[300px] p-0 ml-[-30px]'>
+        <ChartContainer config={config.chart} className='w-full p-0 ml-[-30px]' maxHeight={300}>
           <BarChart accessibilityLayer data={datapoints}>
             <CartesianGrid
               horizontal={true}
@@ -157,7 +157,7 @@ export function DonutChartDisplay({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={BRAND_CONFIG} className='w-full max-h-[300px] p-4'>
+        <ChartContainer config={BRAND_CONFIG} className='w-full p-4' maxHeight={300}>
           <PieChart>
             <ChartTooltip
               cursor={false}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx

@@ -57,6 +57,9 @@ export default function PageClient() {
                 <CardTitle>Recent Sign Ups</CardTitle>
               </CardHeader>
               <CardContent>
+                {data.recently_registered.length === 0 && (
+                  <Typography variant='secondary'>No recent sign ups</Typography>
+                )}
                 <Table>
                   <TableBody>
                     {data.recently_registered.map((user: any) => <TableRow key={user.id}>
@@ -77,6 +80,9 @@ export default function PageClient() {
                 <CardTitle>Recently Active Users</CardTitle>
               </CardHeader>
               <CardContent>
+                {data.recently_active.length === 0 && (
+                  <Typography variant='secondary'>No recent active users</Typography>
+                )}
                 <Table>
                   <TableBody>
                     {data.recently_active.map((user: any) => <TableRow key={user.id}>

apps/dashboard/src/components/ui/chart.tsx

@@ -37,12 +37,17 @@ function useChart() {
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
+    /**
+     * Some browsers follow the spec more closely and `height: 100%` does not inherit max-height (eg. Safari), so we
+     * need to set the maxHeight for both the outer container and the ResponsiveContainer.
+     */
+    maxHeight?: number,
     config: ChartConfig,
     children: React.ComponentProps<
       typeof RechartsPrimitive.ResponsiveContainer
     >["children"],
   }
->(({ id, className, children, config, ...props }, ref) => {
+>(({ id, className, children, config, maxHeight, ...props }, ref) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
@@ -56,16 +61,20 @@ const ChartContainer = React.forwardRef<
           className
         )}
         {...props}
+        style={{
+          ...props.style,
+          maxHeight,
+        }}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer maxHeight={maxHeight}>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   );
 });
-ChartContainer.displayName = "Chart";
+ChartContainer.displayName = "ChartContainer";
 
 const ChartStyle = ({ id, config }: { id: string, config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(

packages/stack-ui/src/components/ui/table.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import React from "react";
 
 import { cn } from "../../lib/utils";
 
@@ -111,12 +111,7 @@ const TableCaption = forwardRefIfNeeded<
 TableCaption.displayName = "TableCaption";
 
 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
+  Table, TableBody, TableCaption, TableCell, TableFooter,
+  TableHead, TableHeader, TableRow
 };
+