From 0d4be40c25a57c1919c54851157cb445980b4197 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sat, 22 Nov 2025 02:03:50 +0800
Subject: [PATCH] refactor(layout): standardize max-width to 60rem and optimize
 padding structure

- Unify container max-width across components:
  * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list
  * Replace max-w-5xl with max-w-[60rem] in PromptPanel
  * Move padding from header element to inner container for consistent spacing
- Optimize padding hierarchy:
  * Remove px-6 from header element, add to inner header container
  * Remove px-6 from main element, keep it only in provider list container
  * Consolidate PromptPanel padding: move px-6 from nested divs to outer container
  * Remove redundant pl-1 sm:pl-2 from logo/title area
- Benefits:
  * Consistent 60rem max-width provides better readability on wide screens
  * Simplified padding structure reduces CSS complexity
  * Cleaner responsive behavior with unified spacing rules

This creates a more maintainable and visually consistent layout system.
---
 src/App.tsx                            | 10 +++++-----
 src/components/prompts/PromptPanel.tsx |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b933d0b..fc385a3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -281,7 +281,7 @@ function App() {
         return <AgentsPanel onOpenChange={() => setCurrentView("providers")} />;
       default:
         return (
-          <div className="mx-auto max-w-4xl space-y-4">
+          <div className="mx-auto max-w-[60rem] px-6 space-y-4">
             <ProviderList
               providers={providers}
               currentProviderId={currentProviderId}
@@ -339,13 +339,13 @@ function App() {
       )}
 
       <header
-        className="glass-header fixed top-0 z-50 w-full px-6 py-3 transition-all duration-300"
+        className="glass-header fixed top-0 z-50 w-full py-3 transition-all duration-300"
         data-tauri-drag-region
         style={{ WebkitAppRegion: "drag" } as any}
       >
         <div className="h-4 w-full" aria-hidden data-tauri-drag-region />
         <div
-          className="flex flex-wrap items-center justify-between gap-2"
+          className="mx-auto max-w-[60rem] px-6 flex flex-wrap items-center justify-between gap-2"
           data-tauri-drag-region
           style={{ WebkitAppRegion: "drag" } as any}
         >
@@ -375,7 +375,7 @@ function App() {
               </div>
             ) : (
               <>
-                <div className="flex items-center gap-2 pl-1 sm:pl-2">
+                <div className="flex items-center gap-2">
                   <a
                     href="https://github.com/farion1231/cc-switch"
                     target="_blank"
@@ -509,7 +509,7 @@ function App() {
       </header>
 
       <main
-        className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${currentView === "providers" ? "pt-24" : "pt-20"
+        className={`flex-1 overflow-y-auto pb-12 animate-fade-in scroll-overlay ${currentView === "providers" ? "pt-24" : "pt-20"
           }`}
         style={{ overflowX: "hidden" }}
       >
diff --git a/src/components/prompts/PromptPanel.tsx b/src/components/prompts/PromptPanel.tsx
index 90e2919..f07bf2e 100644
--- a/src/components/prompts/PromptPanel.tsx
+++ b/src/components/prompts/PromptPanel.tsx
@@ -80,8 +80,8 @@ const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
     const enabledPrompt = promptEntries.find(([_, p]) => p.enabled);
 
     return (
-      <div className="mx-auto max-w-5xl flex flex-col h-[calc(100vh-8rem)]">
-        <div className="flex-shrink-0 px-6 py-4 glass rounded-xl border border-white/10 mb-4">
+      <div className="mx-auto max-w-[60rem] flex flex-col h-[calc(100vh-8rem)] px-6">
+        <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
           <div className="text-sm text-muted-foreground">
             {t("prompts.count", { count: promptEntries.length })} ·{" "}
             {enabledPrompt
@@ -90,7 +90,7 @@ const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto px-6 pb-16">
+        <div className="flex-1 overflow-y-auto pb-16">
           {loading ? (
             <div className="text-center py-12 text-gray-500 dark:text-gray-400">
               {t("prompts.loading")}