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.
This commit is contained in:
YoVinchen
2025-11-22 02:03:50 +08:00
parent 00720ecf30
commit 0d4be40c25
2 changed files with 8 additions and 8 deletions
+5 -5
View File
@@ -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" }}
>