From a73d8d38974e5ed0173c71e7f8e669d5cf0a7afd Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Wed, 10 Dec 2025 16:29:28 +0100
Subject: [PATCH] refactor: Consistent max-width for Command Center header and
 content

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).
---
 .../src/components/CommandCenterLayout.tsx    | 38 ++++++++++---------
 frontend/src/components/PremiumTable.tsx      |  2 +-
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/CommandCenterLayout.tsx b/frontend/src/components/CommandCenterLayout.tsx
index ef1d05e..9444a3e 100755
--- a/frontend/src/components/CommandCenterLayout.tsx
+++ b/frontend/src/components/CommandCenterLayout.tsx
@@ -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>
 
diff --git a/frontend/src/components/PremiumTable.tsx b/frontend/src/components/PremiumTable.tsx
index ee19383..42fac28 100755
--- a/frontend/src/components/PremiumTable.tsx
+++ b/frontend/src/components/PremiumTable.tsx
@@ -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>
   )