feat: refine letters UI

app/magazines/[slug]/[issue]/page.tsx

@@ -40,7 +40,7 @@ export default async function MagazineIssuePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/magazines/${slug}`}
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -52,7 +52,7 @@ export default async function MagazineIssuePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <IssueSidebar
           items={sidebarItems}
           currentSlug={issueSlug}

app/magazines/[slug]/page.tsx

@@ -35,7 +35,7 @@ export default async function MagazineIndexPage({
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>
         )}

app/magazines/page.tsx

@@ -52,7 +52,7 @@ export default async function MagazinesPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8 space-y-10">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-10">
         {sortedGroups.map((group) => (
           <div key={group}>
             {showGroupHeadings && (