mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 00:35:32 +08:00
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:
@@ -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")}
|
||||
|
||||
Reference in New Issue
Block a user