Sales chart tweaks

dashboard/src/components/dashboard/SalesChart.jsx

@@ -449,7 +449,7 @@ const SummaryStats = memo(({ stats = {} }) => {
   } = stats;
 
   return (
-    <div className="grid grid-cols-4 gap-4 py-4 max-w-4xl">
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 py-4 max-w-3xl">
       <StatCard
         title="Total Revenue"
         value={formatCurrency(totalRevenue, false)}
@@ -573,7 +573,6 @@ const SkeletonTable = () => (
 const SalesChart = ({
   timeRange = "last30days",
   title = "Sales Overview",
-  description = "Track your sales performance over time",
 }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -684,12 +683,12 @@ const SalesChart = ({
                 {title}
               </CardTitle>
             </div>
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
               {!error && (
                 <Dialog>
                   <DialogTrigger asChild>
                     <Button variant="outline" className="h-9">
-                      View Details
+                      Details
                     </Button>
                   </DialogTrigger>
                   <DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col">
@@ -759,7 +758,7 @@ const SalesChart = ({
                             }))
                           }
                         >
-                          Compare Prev Period
+                          Compare Prev
                         </Button>
                       </div>
                     </DialogHeader>
@@ -875,7 +874,7 @@ const SalesChart = ({
 
           {/* Show metric toggles only if not in error state */}
           {!error && (
-            <div className="flex items-center gap-2 pt-2">
+            <div className="flex items-center flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
               <div className="flex flex-wrap gap-1">
                 <Button
                   variant={metrics.revenue ? "default" : "outline"}
@@ -927,7 +926,8 @@ const SalesChart = ({
                 </Button>
               </div>
 
-              <Separator orientation="vertical" className="h-6" />
+              <Separator orientation="vertical" className="h-6 hidden sm:block" />
+              <Separator orientation="horizontal" className="sm:hidden w-20 my-2" />
 
               <Button
                 variant={metrics.showPrevious ? "default" : "outline"}
@@ -975,11 +975,11 @@ const SalesChart = ({
           </div>
         ) : (
           <>
-            <div className="h-[400px] mt-4 bg-card rounded-lg p-4 relative">
+            <div className="h-[400px] mt-4 bg-card rounded-lg p-0 relative">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart
                   data={data}
-                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                  margin={{ top: 5, right: -30, left: -5, bottom: 5 }}
                 >
                   <CartesianGrid
                     strokeDasharray="3 3"