feat: refine letters UI

app/books/cc/[lila]/[chapter]/[verse]/page.tsx

@@ -68,7 +68,7 @@ export default async function CcVersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/books/cc/${lila}`}
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -80,7 +80,7 @@ export default async function CcVersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verseData}
           initialVerseNum={requestedVerse}

app/books/cc/[lila]/page.tsx

@@ -54,7 +54,7 @@ export default async function LilaPage({
           <ExtractedVerseCount count={totalVerses} label="extracted verses" />
         </p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/cc/page.tsx

@@ -45,7 +45,7 @@ export default async function CcPage() {
         <h1 className="mt-3 text-3xl font-bold text-foreground">{title}</h1>
         <p className="mt-1 text-muted-foreground">{author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">