From da24b8a37f79548227e50284bcdb6d370bba7759 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 12 Aug 2025 21:43:46 +0800
Subject: [PATCH] refactor(header): improve header layout and styling

- Updated header component styles for better responsiveness and visual appeal.
- Changed border radius and padding for the header elements to enhance the overall design.
- Adjusted margin and width properties to ensure consistent layout across different screen sizes.

These changes collectively enhance the user experience by providing a more polished and adaptable header design.

Signed-off-by: Innei <tukon479@gmail.com>
---
 apps/ssr/client/components/layout/header/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/ssr/client/components/layout/header/index.tsx b/apps/ssr/client/components/layout/header/index.tsx
index 5b5538d27..b2a1a87a5 100644
--- a/apps/ssr/client/components/layout/header/index.tsx
+++ b/apps/ssr/client/components/layout/header/index.tsx
@@ -34,18 +34,17 @@ const HeaderWrapper: Component = (props) => {
     <header className={"fixed inset-x-0 top-0 z-50 transition-all duration-300 ease-out"}>
       <div
         className={cn(
-          "mx-4 mt-4 transition-all duration-300 ease-out",
+          "mx-4 mt-4 max-w-5xl transition-all duration-300 ease-out lg:mx-auto",
           isCompact ? "mt-2" : "mt-4",
-          isHeaderElevated ? "mx-0 md:mx-4" : "px-4 sm:px-6 lg:px-8",
         )}
       >
         <m.div
           className={cn(
-            "rounded-xl border border-transparent px-4 transition-all duration-300 ease-out",
+            "rounded-full border border-transparent px-6 transition-all duration-300 ease-out",
             "relative flex items-center",
             isCompact ? "py-2" : "py-3",
             isHeaderElevated && [
-              "border-border/50 bg-background/80 px-4 shadow-sm backdrop-blur-xl md:px-0",
+              "border-border/50 bg-background/80 shadow-sm backdrop-blur-xl",
               "supports-[backdrop-filter]:bg-background/60",
             ],
           )}