Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-21 14:08:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve layout and visual spacing across the application

Browse Source 
Adjust main content width, header height, and text sizes for better desktop experience and implement responsive spacing for better visual hierarchy.

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/sQ6VYZc
This commit is contained in:
michaelschal committed 2025-08-12 19:52:22 +00:00
1 parent f1d6f27e3d
commit 1933819155
6 files changed
+83 -68
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/Layout.tsx
+8 -6
View File
@@ -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-64'
isMobile ? 'ml-0' : sidebarCollapsed ? 'ml-16' : 'ml-72 xl:ml-80'
}`}>
{/* Header with store selector for admin */}
<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-4 sm:px-6">
<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">
<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-lg font-medium text-gray-800 dark:text-gray-200">LogiFlow</h1>
<h1 className="text-xl xl:text-2xl font-semibold text-gray-800 dark:text-gray-200">LogiFlow</h1>
</div>
{/* Store selector for admin - moved to top right */}
@@ -155,7 +155,7 @@ export default function Layout({ children }: LayoutProps) {
<div className="flex items-center gap-2">
<div
className="w-3 h-3"
style={{ backgroundColor: store.color }}
style={{ backgroundColor: store.color || '#6B7280' }}
/>
<span>{store.name}</span>
</div>
@@ -168,9 +168,11 @@ export default function Layout({ children }: LayoutProps) {
</header>
{/* Main content area */}
<div className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900 p-4 sm:p-6">
<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">
{children}
<div className="desktop-spacing">
{children}
</div>
</div>
</div>
</main>