Responsive layout adjustments

dashboard/src/App.jsx

@@ -101,8 +101,8 @@ const DashboardLayout = () => {
                 </div>
               </div>
             </div>
-            <div id="realtime" className="xl:col-span-2 col-span-6 h-[508px] overflow-auto">
-              <div className="h-full">
+            <div id="realtime" className="xl:col-span-2 col-span-6 overflow-auto">
+              <div id="realtime" className="h-full">
                 <RealtimeAnalytics />
               </div>
             </div>
@@ -116,18 +116,18 @@ const DashboardLayout = () => {
             </div>
           </div>
           <div className="grid grid-cols-12 gap-4">
-            <div id="product-grid" className="col-span-4 h-[500px]">
+            <div id="product-grid" className="col-span-12 lg:col-span-4 h-[500px]">
               <ProductGrid />
             </div>
-            <div id="campaigns" className="col-span-8">
+            <div id="campaigns" className="col-span-12 lg:col-span-8">
               <KlaviyoCampaigns />
             </div>
           </div>
           <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-8">
+            <div id="analytics" className="col-span-12 xl:col-span-8">
               <AnalyticsDashboard />
             </div>
-            <div className="col-span-4">
+            <div id="user-behavior" className="col-span-12 xl:col-span-4">
               <UserBehaviorDashboard />
             </div>
           </div>

dashboard/src/components/dashboard/AnalyticsDashboard.jsx

@@ -316,7 +316,7 @@ export const AnalyticsDashboard = () => {
             </div>
           ) : null}
 
-          <div className="flex items-center flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
+          <div className="flex flex-col sm:flex-row gap-0 sm:gap-4 pt-2">
             <div className="flex flex-wrap gap-1">
               <Button
                 variant={metrics.activeUsers ? "default" : "outline"}
@@ -328,7 +328,8 @@ export const AnalyticsDashboard = () => {
                   }))
                 }
               >
-                Active Users
+                <span className="hidden sm:inline">Active Users</span>
+                <span className="sm:hidden">Active</span>
               </Button>
               <Button
                 variant={metrics.newUsers ? "default" : "outline"}
@@ -340,7 +341,8 @@ export const AnalyticsDashboard = () => {
                   }))
                 }
               >
-                New Users
+                <span className="hidden sm:inline">New Users</span>
+                <span className="sm:hidden">New</span>
               </Button>
               <Button
                 variant={metrics.pageViews ? "default" : "outline"}
@@ -352,7 +354,8 @@ export const AnalyticsDashboard = () => {
                   }))
                 }
               >
-                Page Views
+                <span className="hidden sm:inline">Page Views</span>
+                <span className="sm:hidden">Page Views</span>
               </Button>
               <Button
                 variant={metrics.conversions ? "default" : "outline"}
@@ -364,7 +367,8 @@ export const AnalyticsDashboard = () => {
                   }))
                 }
               >
-                Conversions
+                <span className="hidden sm:inline">Conversions</span>
+                <span className="sm:hidden">Conversions</span>
               </Button>
             </div>
           </div>

dashboard/src/components/dashboard/Navigation.jsx

@@ -24,9 +24,12 @@ const Navigation = () => {
       label: "Event Feed",
       responsiveIds: ["feed-xl", "feed-lg"],
     },
+    { id: "realtime", label: "Realtime" },
     { id: "products", label: "Top Products" },
     { id: "sales", label: "Sales Chart" },
     { id: "campaigns", label: "Campaigns" },
+    { id: "analytics", label: "Analytics" },
+    { id: "user-behavior", label: "User Behavior" },
     { id: "meta-campaigns", label: "Meta Ads" },
     { id: "gorgias-overview", label: "Customer Service" },
     { id: "calls", label: "Calls" },

dashboard/src/components/dashboard/RealtimeAnalytics.jsx

@@ -394,7 +394,7 @@ export const RealtimeAnalytics = () => {
           </Alert>
         )}
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-1 mb-3">
+        <div className="grid grid-cols-2 gap-4 mt-1 mb-3">
           {summaryCard(
             "Last 30 minutes",
             "Active users",