fix: bg chapter verse index

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

@@ -55,15 +55,14 @@ export default async function CcVersePage({
   if (verseIndex.length > 0) {
     mobileNavGroups.push({
       title: "Verses",
-      items: verseIndex.map((v) => {
-        const label = v.verseEnd ? `${v.reference}` : v.reference;
-        return {
-          slug: String(v.verse),
-          label,
-          href: `/books/cc/${lila}/${chapter}/${v.verse}`,
-          type: "verse",
-        };
-      }),
+      items: verseIndex.map((v) => ({
+        slug: String(v.verse),
+        label: v.verseEnd
+          ? `Verse ${chapter}.${v.verse}–${v.verseEnd}`
+          : `Verse ${chapter}.${v.verse}`,
+        href: `/books/cc/${lila}/${chapter}/${v.verse}`,
+        type: "verse",
+      })),
     });
   }
 
@@ -96,7 +95,7 @@ export default async function CcVersePage({
           showBengali={true}
           basePath={`/books/cc/${lila}/${chapter}`}
           mobileNavGroups={mobileNavGroups}
-          mobileNavBookTitle={`${lilaInfo.name} — Chapter ${chapter}`}
+          mobileNavBookTitle={`Chapter ${chapter}: ${chapterInfo.title}`}
         />
       </div>
     </div>

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

@@ -62,7 +62,7 @@ export default async function LilaPage({
                 <li key={ch.number}>
                   <Link
                     href={`/books/cc/${lila}/${ch.number}`}
-                    className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                   >
                     <div>
                       <span className="text-sm text-primary font-medium">
@@ -70,7 +70,7 @@ export default async function LilaPage({
                       </span>
                       <p className="font-medium text-foreground">{ch.title}</p>
                     </div>
-                    <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                    <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                       <ExtractedVerseCount count={ch.totalVerses} />
                     </span>
                   </Link>

app/books/cc/page.tsx

@@ -58,7 +58,7 @@ export default async function CcPage() {
                   <li key={lila.key}>
                     <Link
                       href={`/books/cc/${lila.key}`}
-                      className="flex items-center justify-between px-5 py-4 hover:bg-muted transition-colors"
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
                     >
                       <div>
                         <Badge variant="secondary" className="mb-1">
@@ -68,7 +68,7 @@ export default async function CcPage() {
                           {lila.totalChapters} chapters
                         </p>
                       </div>
-                      <span className="text-sm text-muted-foreground shrink-0 ml-4">
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
                         <ExtractedVerseCount
                           count={totalVerses}
                           label="extracted verses"