From 8a056a56dcf9e98792c1770613a4b1ea25dabdc4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 18 May 2025 00:16:01 +0000
Subject: [PATCH] Fix: Ensure responsiveness across devices

Implemented responsive design adjustments to support both mobile and desktop devices.
---
 src/App.css                       |  7 +++---
 src/components/layout/Layout.tsx  | 37 ++++++++++++++++++++++++++++---
 src/components/layout/Sidebar.tsx |  6 ++---
 src/index.css                     | 14 ++++++++++--
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index b9d355d..d981621 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,7 @@
+
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  min-height: 100vh;
 }
 
 .logo {
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index e506dbb..1dcaaa1 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,7 +1,10 @@
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Sidebar from '@/components/layout/Sidebar';
 import { useToast } from "@/components/ui/use-toast";
+import { Menu } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -9,11 +12,39 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const { toast } = useToast();
+  const [isMobile, setIsMobile] = useState(false);
+  
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    
+    checkIfMobile();
+    window.addEventListener('resize', checkIfMobile);
+    
+    return () => {
+      window.removeEventListener('resize', checkIfMobile);
+    };
+  }, []);
   
   return (
     <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-      <main className="flex-1 overflow-auto p-6">
+      {isMobile ? (
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="md:hidden fixed top-2 left-2 z-20">
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="p-0 w-[250px]">
+            <Sidebar className="w-full border-none" />
+          </SheetContent>
+        </Sheet>
+      ) : (
+        <Sidebar />
+      )}
+      <main className="flex-1 overflow-auto p-4 md:p-6 pt-10 md:pt-6">
         {children}
       </main>
     </div>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index a354193..a02ecc1 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { Button } from "@/components/ui/button";
@@ -34,12 +34,12 @@ interface SidebarProps {
 
 const Sidebar = ({ className }: SidebarProps) => {
   const location = useLocation();
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = React.useState(false);
 
   return (
     <div
       className={cn(
-        "flex flex-col h-screen bg-sidebar border-r border-border transition-all duration-300 ease-in-out",
+        "flex flex-col h-full bg-sidebar border-r border-border transition-all duration-300 ease-in-out",
         collapsed ? "w-[60px]" : "w-[250px]",
         className
       )}
diff --git a/src/index.css b/src/index.css
index 94642e2..76a2784 100644
--- a/src/index.css
+++ b/src/index.css
@@ -107,10 +107,20 @@
   }
   
   .dashboard-card {
-    @apply bg-card rounded-lg border p-5 shadow-sm transition-all hover:shadow-md;
+    @apply bg-card rounded-lg border p-4 md:p-5 shadow-sm transition-all hover:shadow-md;
   }
   
   .data-card {
-    @apply bg-card rounded-lg border p-4 shadow-sm transition-all;
+    @apply bg-card rounded-lg border p-3 md:p-4 shadow-sm transition-all;
+  }
+  
+  /* Responsive utilities */
+  .responsive-grid {
+    @apply grid gap-2 sm:gap-3 md:gap-4;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+  
+  .responsive-container {
+    @apply px-2 sm:px-4 md:px-6;
   }
 }