Fix: Ensure responsiveness across devices

Implemented responsive design adjustments to support both mobile and desktop devices.

src/App.css

@@ -1,8 +1,7 @@
+
 #root {
-  max-width: 1280px;
+  width: 100%;
-  margin: 0 auto;
+  min-height: 100vh;
-  padding: 2rem;
-  text-align: center;
 }
 
 .logo {

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 />
+      {isMobile ? (
-      <main className="flex-1 overflow-auto p-6">
+        <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>

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
       )}

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;
   }
 }