style: align header, content, and footer widths

Standardized all layout sections to use consistent max-width:
- Changed from inconsistent container/max-w-6xl to unified max-w-7xl
- Header: container mx-auto → w-full max-w-7xl mx-auto
- Main: container mx-auto → w-full max-w-7xl mx-auto
- Footer: container mx-auto → w-full max-w-7xl mx-auto
- MainConverter: removed max-w-6xl (inherits from parent)

All sections now align perfectly with matching left/right edges
for a clean, professional layout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-08 11:34:17 +01:00
parent 3113cf2667
commit 296f78709b
3 changed files with 4 additions and 4 deletions

View File

@@ -7,13 +7,13 @@ export default function Home() {
<div className="min-h-screen bg-background flex flex-col">
{/* Header with theme toggle */}
<div className="border-b sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-40">
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
<div className="w-full max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<div className="text-xl font-bold">Units UI</div>
<ThemeToggle />
</div>
</div>
<main className="container mx-auto px-4 py-8 flex-1">
<main className="w-full max-w-7xl mx-auto px-4 py-8 flex-1">
<header className="text-center mb-12">
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
Unit Converter

View File

@@ -138,7 +138,7 @@ export default function MainConverter() {
}, [selectedUnit]);
return (
<div className="w-full max-w-6xl mx-auto space-y-6">
<div className="w-full space-y-6">
{/* Command Palette */}
<CommandPalette
onSelectMeasure={setSelectedMeasure}

View File

@@ -5,7 +5,7 @@ export default function Footer() {
return (
<footer className="border-t mt-16 bg-background">
<div className="container mx-auto px-4 py-8">
<div className="w-full max-w-7xl mx-auto px-4 py-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* About */}
<div>