GKaszewski/pocket-chords
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-07-11 22:49:05 +02:00
parent 6912653906
commit 9f844bac2e
3 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/app/components/auto-scroll-controls.tsx
View File

@@ -80,7 +80,7 @@ export function AutoScrollControls({ scrollRef }: Props) {
} }
return ( 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 <Button
variant="ghost" variant="ghost"
size="icon" size="icon"

2
app/app/components/chord-chart.tsx
View File

@@ -45,7 +45,7 @@ function ChordRow({
onChordClick?: (chord: string) => void; onChordClick?: (chord: string) => void;
}) { }) {
return ( 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) => ( {chords.map(({ offset, chord }, i) => (
<span <span
key={i} key={i}

14
app/app/components/section-nav.tsx
View File

@@ -7,15 +7,17 @@ interface Props {
} }
function abbreviate(label: string): string { 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("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("bridge")) return "Br";
if (lower.startsWith("pre-chorus") || lower.startsWith("prechorus")) if (lower.startsWith("prechorus")) return "PC";
return "PC";
if (lower.startsWith("intro")) return "In"; if (lower.startsWith("intro")) return "In";
if (lower.startsWith("outro")) return "Out"; 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; return label;
} }
@@ -24,7 +26,7 @@ export function SectionNav({ sections, onJump }: Props) {
if (labeled.length === 0) return null; if (labeled.length === 0) return null;
return ( return (
<ScrollArea className="w-full"> <ScrollArea className="min-w-0 flex-1">
<div className="flex gap-1 px-3 py-1.5"> <div className="flex gap-1 px-3 py-1.5">
{labeled.map((s) => ( {labeled.map((s) => (
<Button <Button