yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: Consistent max-width for Command Center header and content

Browse Source 
LAYOUT CHANGES:

1. CommandCenterLayout header now uses max-w-7xl:
   - Header width matches content width exactly
   - Added mx-auto for centering
   - Cleaner, more consistent visual alignment

2. Main content area:
   - max-w-7xl and centering now in layout wrapper
   - Consistent padding: py-6 sm:py-8

3. PageContainer simplified:
   - Removed max-w-7xl mx-auto (now in parent)
   - Just provides space-y-6 for child spacing

4. Header bar improvements:
   - Slightly reduced height: h-16 sm:h-18
   - Better button styling (hover states)
   - Truncation for long titles on mobile
   - Icons slightly larger for better visibility

RESULT:
All Command Center pages now have perfectly aligned
header and content with the same max-width (max-w-7xl).
This commit is contained in:
yves.gugger
2025-12-10 16:29:28 +01:00
parent a41e28c420
commit a73d8d3897
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/CommandCenterLayout.tsx
View File

@ -108,30 +108,30 @@ export function CommandCenterLayout({
)}
>
{/* Top Bar */}
<header className="sticky top-0 z-30 h-16 sm:h-20 bg-gradient-to-r from-background/90 via-background/80 to-background/90 backdrop-blur-xl border-b border-border/30">
<div className="h-full px-4 sm:px-6 lg:px-8 flex items-center justify-between">
<header className="sticky top-0 z-30 bg-gradient-to-r from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-b border-border/30">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-18 flex items-center justify-between">
{/* Left: Title */}
<div className="ml-10 lg:ml-0">
<div className="ml-10 lg:ml-0 min-w-0 flex-1">
{title && (
<h1 className="text-lg sm:text-xl lg:text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
<h1 className="text-xl sm:text-2xl font-semibold tracking-tight text-foreground truncate">{title}</h1>
)}
{subtitle && (
<p className="text-xs sm:text-sm text-foreground-muted mt-0.5 hidden sm:block">{subtitle}</p>
<p className="text-sm text-foreground-muted mt-0.5 hidden sm:block truncate">{subtitle}</p>
)}
</div>
{/* Right: Actions */}
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-4">
{/* Quick Search */}
<button
onClick={() => setSearchOpen(true)}
className="hidden md:flex items-center gap-2 h-9 px-4 bg-foreground/5 hover:bg-foreground/10
border border-border/50 rounded-lg text-sm text-foreground-muted
hover:text-foreground transition-all duration-200"
className="hidden md:flex items-center gap-2 h-9 px-3 bg-foreground/5 hover:bg-foreground/8
border border-border/40 rounded-lg text-sm text-foreground-muted
hover:text-foreground transition-all duration-200 hover:border-border/60"
>
<Search className="w-4 h-4" />
<span>Search...</span>
<kbd className="hidden lg:inline-flex items-center h-5 px-1.5 bg-background border border-border
<span className="hidden lg:inline">Search</span>
<kbd className="hidden xl:inline-flex items-center h-5 px-1.5 bg-background border border-border/60
rounded text-[10px] text-foreground-subtle font-mono">⌘K</kbd>
</button>
@ -141,7 +141,7 @@ export function CommandCenterLayout({
className="md:hidden flex items-center justify-center w-9 h-9 text-foreground-muted
hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
>
<Search className="w-4.5 h-4.5" />
<Search className="w-5 h-5" />
</button>
{/* Notifications */}
@ -155,7 +155,7 @@ export function CommandCenterLayout({
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
)}
>
<Bell className="w-4.5 h-4.5" />
<Bell className="w-5 h-5" />
{hasNotifications && (
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
@ -213,11 +213,11 @@ export function CommandCenterLayout({
{/* Keyboard Shortcuts Hint */}
<button
onClick={() => {}}
className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-foreground-subtle hover:text-foreground
bg-foreground/5 rounded-lg border border-border/50 hover:border-border transition-all"
className="hidden sm:flex items-center gap-1.5 px-2 py-1.5 text-xs text-foreground-subtle hover:text-foreground
bg-foreground/5 rounded-lg border border-border/40 hover:border-border/60 transition-all"
title="Keyboard shortcuts (?)"
>
<Command className="w-3 h-3" />
<Command className="w-3.5 h-3.5" />
<span>?</span>
</button>
@ -228,8 +228,10 @@ export function CommandCenterLayout({
</header>
{/* Page Content */}
<main className="relative p-4 sm:p-6 lg:p-8">
{children}
<main className="relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{children}
</div>
</main>
</div>

2
frontend/src/components/PremiumTable.tsx
View File

@ -388,7 +388,7 @@ export function StatCard({
export function PageContainer({ children, className }: { children: ReactNode; className?: string }) {
return (
<div className={clsx("max-w-7xl mx-auto space-y-6", className)}>
<div className={clsx("space-y-6", className)}>
{children}
</div>
)