From 3abd63b8367517cef0374077579eddb3cc0c806f Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sun, 22 Dec 2024 21:51:36 -0500
Subject: [PATCH] Fix app mobile layout

---
 dashboard/src/App.jsx                            | 15 +++++++++------
 dashboard/src/components/dashboard/EventFeed.jsx |  2 +-
 dashboard/src/components/dashboard/Header.jsx    |  4 ++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index 853604e..3e7c2f8 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -82,29 +82,32 @@ const SmallLayout = () => {
 const DashboardLayout = () => {
   return (
     <ScrollProvider>
-      <div className="min-h-screen max-w-[1800px] mx-auto">
+      <div className="min-h-screen max-w-[1600px] mx-auto">
         <div className="p-4">
           <Header />
         </div>
         <Navigation />
         <div className="p-4 space-y-4">
-          <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-8">
+          <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
+            <div className="2xl:col-span-4 col-span-6">
               <div className="space-y-4 h-full w-full">
                 <StatCards />
               </div>
             </div>
-            <div className="col-span-4 h-[530px]">
+            <div className="xl:col-span-2 col-span-6 h-[530px] 2xl:block hidden">
               <div className="h-full">
                 <div className="h-full"><EventFeed /></div>
               </div>
             </div>
           </div>
           <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-4 h-[740px]">
+            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:hidden h-[740px]">
+              <EventFeed />
+            </div>
+            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:col-span-4 h-[740px]">
               <ProductGrid />
             </div>
-            <div className="col-span-8 h-full w-full flex">
+            <div className="col-span-12 2xl:col-span-8 h-full w-full flex">
               <SalesChart className="w-full h-full"/>
             </div>
           </div>
diff --git a/dashboard/src/components/dashboard/EventFeed.jsx b/dashboard/src/components/dashboard/EventFeed.jsx
index 79b0a38..c0892e3 100644
--- a/dashboard/src/components/dashboard/EventFeed.jsx
+++ b/dashboard/src/components/dashboard/EventFeed.jsx
@@ -1387,7 +1387,7 @@ const EventFeed = ({
   );
 
   return (
-    <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
+    <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm w-full">
       <CardHeader className="p-6">
         <div className="flex justify-between items-start">
           <div>
diff --git a/dashboard/src/components/dashboard/Header.jsx b/dashboard/src/components/dashboard/Header.jsx
index ae07cc3..6a56fc9 100644
--- a/dashboard/src/components/dashboard/Header.jsx
+++ b/dashboard/src/components/dashboard/Header.jsx
@@ -133,7 +133,7 @@ const Header = () => {
       )}
     >
       <CardContent className="p-4">
-        <div className="flex flex-col justify-between lg:flex-row items-left sm:items-center flex-wrap">
+        <div className="flex flex-col justify-between lg:flex-row items-center sm:items-center flex-wrap">
           <div className="flex items-center space-x-4">
             <div className="flex space-x-2">
               <div
@@ -154,7 +154,7 @@ const Header = () => {
               </h1>
             </div>
           </div>
-          <div className="flex items-left sm:items-center justify-start flex-wrap mt-2 sm:mt-0">
+          <div className="flex items-left sm:items-center justify-center flex-wrap mt-2 sm:mt-0">
             {weather?.main && (
               <>
                 <div className="flex-col items-center text-center">