From 6b30c87340483a6e64503a59e72e520007e93c1a Mon Sep 17 00:00:00 2001
From: Thanan Traiongthawon <95660+nullcoder@users.noreply.github.com>
Date: Fri, 6 Jun 2025 23:55:47 -0700
Subject: [PATCH] refactor: update main pages to use Container component

- Replace custom container styles with Container component
- Update homepage to use Container instead of custom max-w-4xl
- Update create page to use Container instead of generic container class
- Update gist view page to use Container for consistency
- Maintain existing header container implementation (appropriate for full-width background)

This provides consistent spacing and responsive padding across all main pages:
- Mobile: 16px padding
- Tablet: 32px padding
- Desktop: 48px padding

Co-Authored-By: Claude <claude@ghostpaste.dev>
---
 app/create/page.tsx | 6 ++++--
 app/g/[id]/page.tsx | 6 ++++--
 app/page.tsx        | 9 +++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/create/page.tsx b/app/create/page.tsx
index cfd32c2..d478010 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -1,10 +1,12 @@
+import { Container } from "@/components/ui/container";
+
 export default function CreateGistPage() {
   return (
-    <div className="container mx-auto py-8">
+    <Container className="py-8">
       <h1 className="mb-4 text-2xl font-bold">Create New Gist</h1>
       <p className="text-muted-foreground">
         This page will contain the form for creating encrypted gists.
       </p>
-    </div>
+    </Container>
   );
 }
diff --git a/app/g/[id]/page.tsx b/app/g/[id]/page.tsx
index f2d3919..757fe76 100644
--- a/app/g/[id]/page.tsx
+++ b/app/g/[id]/page.tsx
@@ -1,3 +1,5 @@
+import { Container } from "@/components/ui/container";
+
 export default async function ViewGistPage({
   params,
 }: {
@@ -6,12 +8,12 @@ export default async function ViewGistPage({
   const { id } = await params;
 
   return (
-    <div className="container mx-auto py-8">
+    <Container className="py-8">
       <h1 className="mb-4 text-2xl font-bold">View Gist</h1>
       <p className="text-muted-foreground">
         This page will display the gist viewer for viewing encrypted gists.
       </p>
       <p className="text-muted-foreground mt-2 text-sm">Gist ID: {id}</p>
-    </div>
+    </Container>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index c4ef113..43afcfb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,10 @@
 import { R2Test } from "@/components/r2-test";
+import { Container } from "@/components/ui/container";
 
 export default function Home() {
   return (
-    <div className="min-h-screen p-8">
-      <main className="mx-auto max-w-4xl">
+    <main className="min-h-screen py-8">
+      <Container>
         <div className="bg-card text-card-foreground rounded-lg border p-6 shadow-sm">
           <h2 className="mb-4 text-2xl font-semibold">
             Zero-Knowledge Encrypted Code Sharing
@@ -30,7 +31,7 @@ export default function Home() {
           <h3 className="mb-4 text-xl font-semibold">R2 Bucket Test</h3>
           <R2Test />
         </div>
-      </main>
-    </div>
+      </Container>
+    </main>
   );
 }