feat: add pagination

app/books/chapter-viewer.tsx

@@ -129,7 +129,7 @@ function VerseCard({
   showBengali: boolean;
 }) {
   return (
-    <Card id={`verse-${verse.verse}`} className="scroll-mt-24">
+    <Card id={`verse-${verse.verse}`} className="">
       <CardHeader className="border-b border-border bg-muted/50 py-3">
         <Badge variant="secondary">{verse.reference}</Badge>
       </CardHeader>
@@ -376,13 +376,16 @@ export function ChapterViewer({
   return (
     <>
       {/* ---- Sidebar: Verse Index ---- */}
-      <aside className="hidden lg:block w-48 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
+      <aside className="hidden lg:block w-64 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
         <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
           Verses
         </h2>
-        <nav className="grid grid-cols-3 gap-0.5">
+        <nav className="grid grid-cols-3 gap-1">
           {verseIndex.map((v) => {
             const isActive = currentVerseNum === v.verse;
+            const label = v.verseEnd
+              ? `${v.verse}–${v.verseEnd}`
+              : String(v.verse);
 
             return (
               <a
@@ -392,13 +395,13 @@ export function ChapterViewer({
                   e.preventDefault();
                   navigateTo(v.verse);
                 }}
-                className={`px-2 py-1 rounded-md text-sm text-center transition-colors ${
+                className={`px-2 py-1 rounded-md text-sm tabular-nums transition-colors ${
                   isActive
                     ? "bg-primary/10 text-primary font-medium"
                     : "text-muted-foreground hover:bg-muted hover:text-foreground"
                 }`}
               >
-                {v.verseEnd ? `${v.verse}–${v.verseEnd}` : v.verse}
+                {label}
               </a>
             );
           })}