Improve layout responsiveness and remove duplicate scrollbars

Refactor layout and sidebar components to enhance responsiveness across devices and eliminate redundant scrollbars, adjusting padding and margins for a cleaner UI.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc8ba926-557c-4bf1-a2ea-ceabbcf38824
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc8ba926-557c-4bf1-a2ea-ceabbcf38824/Msc3nwI

client/src/components/Layout.tsx

@@ -91,10 +91,10 @@ export default function Layout({ children }: LayoutProps) {
         {!isMobile && <Sidebar />}
         
         <main className={`flex-1 flex flex-col overflow-hidden ${
-          isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-72 xl:ml-80'
+          isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-64'
         }`}>
           {/* Header with store selector for admin */}
-          <header className="h-20 xl:h-24 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6 sm:px-8 xl:px-12">
+          <header className="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6">
             <div className="flex items-center gap-4">
               {/* Mobile menu button */}
               {isMobile && (
@@ -107,7 +107,7 @@ export default function Layout({ children }: LayoutProps) {
                   {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                 </Button>
               )}
-              <h1 className="text-xl xl:text-2xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
+              <h1 className="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
             </div>
 
             {/* Store selector for admin - moved to top right */}
@@ -168,12 +168,8 @@ export default function Layout({ children }: LayoutProps) {
           </header>
 
           {/* Main content area */}
-          <div className="flex-1 bg-gray-50 dark:bg-gray-900 p-6 sm:p-8 xl:p-12 overflow-y-auto">
-            <div className="container-responsive">
-              <div className="desktop-spacing">
-                {children}
-              </div>
-            </div>
+          <div className="flex-1 bg-gray-50 dark:bg-gray-900 overflow-hidden">
+            {children}
           </div>
         </main>