diff --git a/web/src/lib/components/AlphabeticalGrid.svelte b/web/src/lib/components/AlphabeticalGrid.svelte
index 33f2c687..4a735a67 100644
--- a/web/src/lib/components/AlphabeticalGrid.svelte
+++ b/web/src/lib/components/AlphabeticalGrid.svelte
@@ -33,7 +33,7 @@
   {#each segments as seg, i (i)}
     {#if seg.divider}
       <div class="divider">
-        <span class="letter">{seg.divider}</span>
+        <h3 class="letter">{seg.divider}</h3>
         <span class="rule"></span>
       </div>
     {/if}
@@ -61,6 +61,8 @@
     font-size: 24px;
     font-weight: 500;
     color: var(--fs-parchment);
+    /* h3 default browser margin would push the divider; reset. */
+    margin: 0;
   }
   .rule {
     flex: 1;
diff --git a/web/src/lib/components/HorizontalScrollRow.svelte b/web/src/lib/components/HorizontalScrollRow.svelte
index 1bd92f23..bdb91497 100644
--- a/web/src/lib/components/HorizontalScrollRow.svelte
+++ b/web/src/lib/components/HorizontalScrollRow.svelte
@@ -152,4 +152,12 @@
   }
   .arrow:hover:not(:disabled) { color: var(--fs-parchment); }
   .arrow:disabled { opacity: 0.3; cursor: not-allowed; }
+  /* Coarse pointers (touch screens) get larger arrows for finger-friendly
+     hit area; mouse pointers keep the visually compact 32px size. */
+  @media (pointer: coarse) {
+    .arrow {
+      width: 40px;
+      height: 40px;
+    }
+  }
 </style>