Mobile fixes for stats page

apps/web/app/(app)/[emailAccountId]/stats/BarListCard.tsx

@@ -32,21 +32,25 @@ export function BarListCard({ tabs, icon, title }: BarListCardProps) {
   const selectedTabData = tabs.find((d) => d.id === selected)?.data || [];
 
   return (
-    <Card className="h-full bg-background relative">
-      <CardHeader className="p-0">
-        <div className="px-5 flex items-center justify-between border-b border-neutral-200">
-          <TabSelect
-            options={tabs.map((d) => ({ id: d.id, label: d.label }))}
-            onSelect={(id: string) => setSelected(id)}
-            selected={selected}
-          />
-          <div className="flex items-center gap-2">
+    <Card className="h-full bg-background relative overflow-x-hidden w-full max-w-full">
+      <CardHeader className="p-0 overflow-x-hidden">
+        <div className="px-3 sm:px-5 flex items-center justify-between border-b border-neutral-200 min-w-0 gap-2">
+          <div className="min-w-0 flex-1">
+            <TabSelect
+              options={tabs.map((d) => ({ id: d.id, label: d.label }))}
+              onSelect={(id: string) => setSelected(id)}
+              selected={selected}
+            />
+          </div>
+          <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
             {icon}
-            <p className="text-xs text-neutral-500">{title.toUpperCase()}</p>
+            <p className="text-xs text-neutral-500 whitespace-nowrap">
+              {title.toUpperCase()}
+            </p>
           </div>
         </div>
       </CardHeader>
-      <CardContent className="pt-5 pb-0 px-5 overflow-hidden h-[330px]">
+      <CardContent className="pt-5 pb-0 px-3 sm:px-5 overflow-hidden overflow-x-hidden h-[330px] max-w-full w-full">
         <div
           className={cn(
             "pointer-events-none absolute bottom-0 left-0 w-full h-1/2 z-20 rounded-[0.44rem]",
@@ -66,9 +70,11 @@ export function BarListCard({ tabs, icon, title }: BarListCardProps) {
           </div>
         ) : (
           <>
-            <HorizontalBarChart data={selectedTabData} />
-            <div className="absolute w-full left-0 bottom-0 pb-6 z-30">
-              <div className="flex justify-center">
+            <div className="w-full min-w-0 max-w-full overflow-x-hidden">
+              <HorizontalBarChart data={selectedTabData} />
+            </div>
+            <div className="absolute w-full left-0 bottom-0 pb-6 z-30 px-3 sm:px-5">
+              <div className="flex justify-center max-w-full">
                 <Dialog>
                   <DialogTrigger asChild>
                     <Button variant="outline" size="xs-2">

apps/web/app/(app)/[emailAccountId]/stats/MainStatChart.tsx

@@ -7,6 +7,7 @@ import type { ChartConfig } from "@/components/ui/chart";
 import type { StatsByWeekResponse } from "@/app/api/user/stats/by-period/route";
 import { BarChart } from "@/app/(app)/[emailAccountId]/stats/BarChart";
 import { COLORS } from "@/utils/colors";
+import { cn } from "@/utils";
 
 const chartConfig = {
   received: { label: "Received", color: COLORS.analytics.blue },
@@ -62,36 +63,34 @@ export function MainStatChart(props: {
   );
 
   return (
-    <Card className="py-4 sm:py-0">
-      <div className="flex flex-col items-stretch border-b sm:flex-row">
-        <div className="flex w-full">
-          {(["received", "sent", "read", "archived"] as const).map((key) => {
-            const chart = key as keyof typeof chartConfig;
-            const isActive = activeChart === chart;
-            return (
-              <button
-                type="button"
-                key={chart}
-                data-active={isActive}
-                className="data-[active=true]:bg-muted/50 flex flex-1 min-w-0 flex-col justify-center gap-1 border-t px-6 py-4 text-left [&:not(:first-child)]:border-l sm:border-t-0 sm:px-8 sm:py-6"
-                onClick={() => setActiveChart(chart)}
-              >
-                <span className="text-muted-foreground text-xs flex items-center gap-1.5">
-                  <span
-                    className="h-2 w-2 rounded-full"
-                    style={{ backgroundColor: chartConfig[chart].color }}
-                  />
-                  {chartConfig[chart].label}
-                </span>
-                <span className="text-lg leading-none font-bold sm:text-3xl">
-                  {total[key].toLocaleString()}
-                </span>
-              </button>
-            );
-          })}
-        </div>
+    <Card className="py-0">
+      <div className="grid grid-cols-2 border-b sm:flex sm:flex-row">
+        {(["received", "sent", "read", "archived"] as const).map((key) => {
+          const chart = key as keyof typeof chartConfig;
+          const isActive = activeChart === chart;
+          return (
+            <button
+              type="button"
+              key={chart}
+              data-active={isActive}
+              className="data-[active=true]:bg-muted/50 flex flex-1 min-w-0 flex-col justify-center gap-1 px-6 py-4 text-left sm:px-8 sm:py-6 [&:nth-child(even)]:border-l [&:nth-child(n+3)]:border-t sm:[&:nth-child(n+3)]:border-t-0 sm:[&:nth-child(2)]:border-l sm:[&:nth-child(3)]:border-l sm:[&:nth-child(4)]:border-l"
+              onClick={() => setActiveChart(chart)}
+            >
+              <span className="text-muted-foreground text-xs flex items-center gap-1.5">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: chartConfig[chart].color }}
+                />
+                {chartConfig[chart].label}
+              </span>
+              <span className="text-lg leading-none font-bold sm:text-3xl">
+                {total[key].toLocaleString()}
+              </span>
+            </button>
+          );
+        })}
       </div>
-      <CardContent className="px-2 sm:p-6">
+      <CardContent className="p-6 pl-0 sm:px-2">
         <BarChart
           data={chartData}
           config={chartConfig}