fix(app): chord overflow clip, section nav scroll on mobile

app/app/components/auto-scroll-controls.tsx

@@ -80,7 +80,7 @@ export function AutoScrollControls({ scrollRef }: Props) {
   }
 
   return (
-    <div className="flex items-center gap-2 px-3 py-1">
+    <div className="flex items-center gap-2 px-3 py-1 shrink-0">
       <Button
         variant="ghost"
         size="icon"

app/app/components/chord-chart.tsx

@@ -45,7 +45,7 @@ function ChordRow({
   onChordClick?: (chord: string) => void;
 }) {
   return (
-    <div className={`relative font-mono ${sizeClass} text-primary`} style={{ height: '1.5em' }}>
+    <div className={`relative font-mono ${sizeClass} text-primary overflow-hidden`} style={{ height: '1.5em' }}>
       {chords.map(({ offset, chord }, i) => (
         <span
           key={i}

app/app/components/section-nav.tsx

@@ -7,15 +7,17 @@ interface Props {
 }
 
 function abbreviate(label: string): string {
-  const lower = label.toLowerCase();
+  const lower = label.toLowerCase().replace(/[-_ ]/g, "");
   if (lower.startsWith("verse")) return label.replace(/verse\s*/i, "V");
-  if (lower.startsWith("chorus")) return "C";
+  if (lower.startsWith("chorus") || lower.startsWith("refrain")) return "C";
   if (lower.startsWith("bridge")) return "Br";
-  if (lower.startsWith("pre-chorus") || lower.startsWith("prechorus"))
-    return "PC";
+  if (lower.startsWith("prechorus")) return "PC";
   if (lower.startsWith("intro")) return "In";
   if (lower.startsWith("outro")) return "Out";
-  if (label.length > 6) return label.slice(0, 5);
+  if (lower.startsWith("instrumental") || lower.startsWith("interlude"))
+    return "Int";
+  if (lower.startsWith("solo")) return "Sol";
+  if (label.length > 4) return label.slice(0, 3);
   return label;
 }
 
@@ -24,7 +26,7 @@ export function SectionNav({ sections, onJump }: Props) {
   if (labeled.length === 0) return null;
 
   return (
-    <ScrollArea className="w-full">
+    <ScrollArea className="min-w-0 flex-1">
       <div className="flex gap-1 px-3 py-1.5">
         {labeled.map((s) => (
           <Button