valknar/pastel-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct padding alignment between navbar, content, and footer

Browse Source 
The previous implementation had misaligned padding structure:
- Navbar/Footer: padding INSIDE max-width container (max-w-7xl mx-auto px-8)
- Page content: padding OUTSIDE max-width container (px-8 on outer, max-w-7xl inside)

This caused content to have double horizontal spacing and misalign with
the navbar and footer borders.

**Fix:**
Move px-8 from outer container to inner max-w-7xl container on all pages,
matching the navbar and footer pattern.

**Structure (all components now consistent):**
```
<div className="py-12">              <!-- vertical padding only -->
  <div className="max-w-7xl mx-auto px-8">  <!-- max-width + horizontal padding -->
    <!-- content -->
  </div>
</div>
```

Now navbar, main content, and footer all align perfectly at the same
left and right edges.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
valknarness
2025-11-07 17:49:36 +01:00
parent 638ba67189
commit e6b693dbd8
12 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/accessibility/colorblind/page.tsx
View File

@@ -59,8 +59,8 @@ export default function ColorBlindPage() {
};
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Color Blindness Simulator</h1>
<p className="text-muted-foreground">

4
app/accessibility/contrast/page.tsx
View File

@@ -56,8 +56,8 @@ export default function ContrastPage() {
);
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Contrast Checker</h1>
<p className="text-muted-foreground">

4
app/accessibility/page.tsx
View File

@@ -27,8 +27,8 @@ export default function AccessibilityPage() {
];
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Accessibility Tools</h1>
<p className="text-muted-foreground">

4
app/accessibility/textcolor/page.tsx
View File

@@ -54,8 +54,8 @@ export default function TextColorPage() {
};
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Text Color Optimizer</h1>
<p className="text-muted-foreground">

4
app/batch/page.tsx
View File

@@ -84,8 +84,8 @@ export default function BatchPage() {
rotateMutation.isPending;
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Batch Operations</h1>
<p className="text-muted-foreground">

4
app/names/page.tsx
View File

@@ -32,8 +32,8 @@ export default function NamedColorsPage() {
}, [data, search, sortBy]);
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Named Colors</h1>
<p className="text-muted-foreground">

4
app/page.tsx
View File

@@ -1,7 +1,7 @@
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center px-8 py-12 md:py-24">
<div className="max-w-7xl w-full space-y-8 text-center">
<main className="flex min-h-screen flex-col items-center justify-center py-12 md:py-24">
<div className="max-w-7xl mx-auto px-8 w-full space-y-8 text-center">
<h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent animate-fade-in">
Pastel UI
</h1>

4
app/palettes/distinct/page.tsx
View File

@@ -37,8 +37,8 @@ export default function DistinctPage() {
};
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Distinct Colors Generator</h1>
<p className="text-muted-foreground">

4
app/palettes/gradient/page.tsx
View File

@@ -52,8 +52,8 @@ export default function GradientPage() {
};
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Gradient Creator</h1>
<p className="text-muted-foreground">

4
app/palettes/harmony/page.tsx
View File

@@ -52,8 +52,8 @@ export default function HarmonyPage() {
};
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Harmony Palette Generator</h1>
<p className="text-muted-foreground">

4
app/palettes/page.tsx
View File

@@ -27,8 +27,8 @@ export default function PalettesPage() {
];
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Palette Generation</h1>
<p className="text-muted-foreground">

8
app/playground/page.tsx
View File

@@ -81,8 +81,8 @@ function PlaygroundContent() {
]);
return (
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto space-y-8">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Color Playground</h1>
<p className="text-muted-foreground">
@@ -206,8 +206,8 @@ function PlaygroundContent() {
export default function PlaygroundPage() {
return (
<Suspense fallback={
<div className="min-h-screen px-8 py-12">
<div className="max-w-7xl mx-auto flex items-center justify-center">
<div className="min-h-screen py-12">
<div className="max-w-7xl mx-auto px-8 flex items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
</div>