feat: refine letters UI

app/books/mm/[chapter]/[verse]/page.tsx

@@ -151,7 +151,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/mm"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -163,7 +163,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/mm/[chapter]/page.tsx

@@ -38,7 +38,7 @@ export default async function MmChapterPage({
 
     return (
       <div className="min-h-screen bg-background">
-        <PageHeader sticky wide>
+        <PageHeader sticky>
           <Link
             href="/books/mm"
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -50,7 +50,7 @@ export default async function MmChapterPage({
           </h1>
         </PageHeader>
 
-        <main className="max-w-3xl mx-auto px-6 py-8">
+        <main className="max-w-5xl mx-auto px-6 py-8">
           <Card>
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">

app/books/mm/page.tsx

@@ -91,7 +91,7 @@ export default async function MmPage() {
         )}
       </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">
         {/* Front Matter */}
         {introduction && (
           <div>