From 9ad1707b009837ab24cfb90b25fd0f1443ad55f5 Mon Sep 17 00:00:00 2001
From: beilunyang <786220806@qq.com>
Date: Sat, 18 Oct 2025 20:37:09 +0800
Subject: [PATCH] refactor(ui): Improve responsive layout and spacing across
 components

---
 .vscode/settings.json               |  3 ++-
 app/[locale]/page.tsx               | 18 +++++++++---------
 app/components/auth/sign-button.tsx |  4 ++--
 app/components/layout/header.tsx    |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9e26dfe..7a73a41 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1 +1,2 @@
-{}
\ No newline at end of file
+{
+}
\ No newline at end of file
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 606fa0a..8a48925 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -19,15 +19,15 @@ export default async function Home({
   const t = await getTranslations({ locale, namespace: "home" })
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 h-screen">
-      <div className="container mx-auto h-full px-4 lg:px-8 max-w-[1600px]">
+    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
+      <div className="container mx-auto px-4 lg:px-8 max-w-[1600px]">
         <Header />
-        <main className="h-full">
-          <div className="h-[calc(100vh-4rem)] flex flex-col items-center justify-center text-center px-4 relative">
+        <main className="pt-16">
+          <div className="h-[calc(100vh-4rem)] flex flex-col items-center justify-center text-center px-2 relative overflow-hidden">
             <div className="absolute inset-0 -z-10 bg-grid-primary/5" />
-            
-            <div className="w-full max-w-3xl mx-auto space-y-12 py-8">
-              <div className="space-y-4">
+
+            <div className="w-full max-w-3xl mx-auto space-y-6 sm:space-y-8 py-4">
+              <div className="space-y-2 sm:space-y-3">
                 <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-wider">
                   <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
                     {t("title")}
@@ -38,7 +38,7 @@ export default async function Home({
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4 sm:px-0">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 px-2 sm:px-0">
                 <FeatureCard
                   icon={<Shield className="w-5 h-5" />}
                   title={t("features.privacy.title")}
@@ -61,7 +61,7 @@ export default async function Home({
                 />
               </div>
 
-              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 px-4 sm:px-0">
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-2 sm:px-0">
                 <ActionButton isLoggedIn={!!session} />
               </div>
             </div>
diff --git a/app/components/auth/sign-button.tsx b/app/components/auth/sign-button.tsx
index a7ee1c2..f3b3865 100644
--- a/app/components/auth/sign-button.tsx
+++ b/app/components/auth/sign-button.tsx
@@ -34,7 +34,7 @@ export function SignButton({ size = "default" }: SignButtonProps) {
   }
 
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
       <Link 
         href={`/${locale}/profile`}
         className="flex items-center gap-2 hover:opacity-80 transition-opacity"
@@ -48,7 +48,7 @@ export function SignButton({ size = "default" }: SignButtonProps) {
             className="rounded-full"
           />
         )}
-        <span className="text-sm">{session.user.name}</span>
+        <span className="hidden sm:inline-block text-sm">{session.user.name}</span>
       </Link>
       <Button onClick={() => signOut({ callbackUrl: `/${locale}` })} variant="outline" className={cn("flex-shrink-0", size === "lg" ? "px-8" : "")} size={size}>
         {t("logout")}
diff --git a/app/components/layout/header.tsx b/app/components/layout/header.tsx
index d85c5bf..698681a 100644
--- a/app/components/layout/header.tsx
+++ b/app/components/layout/header.tsx
@@ -9,7 +9,7 @@ export function Header() {
       <div className="container mx-auto h-full px-4">
         <div className="h-full flex items-center justify-between">
           <Logo />
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
             <LanguageSwitcher />
             <ThemeToggle />
             <SignButton />