From 9f844bac2e78fac11052ea9f916206ce41181af1 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 11 Jul 2026 22:49:05 +0200
Subject: [PATCH] fix(app): chord overflow clip, section nav scroll on mobile

---
 app/app/components/auto-scroll-controls.tsx |  2 +-
 app/app/components/chord-chart.tsx          |  2 +-
 app/app/components/section-nav.tsx          | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/app/components/auto-scroll-controls.tsx b/app/app/components/auto-scroll-controls.tsx
index 19dde43..fb830c1 100644
--- a/app/app/components/auto-scroll-controls.tsx
+++ b/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"
diff --git a/app/app/components/chord-chart.tsx b/app/app/components/chord-chart.tsx
index e646050..be5abe0 100644
--- a/app/app/components/chord-chart.tsx
+++ b/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}
diff --git a/app/app/components/section-nav.tsx b/app/app/components/section-nav.tsx
index 288f822..3e84d5a 100644
--- a/app/app/components/section-nav.tsx
+++ b/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