fix: MaestroButton layout shift - stable min-width and persistent border

- Added min-w-[140px] to prevent width change between states
- Border now always present (same color in both states), preventing 1px jump
- Text wrapped in truncate spans for overflow safety
- Spinning ♩ note preserved in loading state
This commit is contained in:
rin.kagamine committed 2026-05-31 10:28:14 -04:00
1 parent ca18f03a0f
commit b08d0b6782
1 file changed
+13 -11
+13 -11
View File
@@ -75,24 +75,26 @@ export default function MaestroButton({
type="button" type="button"
onClick={handleMaestro} onClick={handleMaestro}
disabled={isMaestroing} disabled={isMaestroing}
className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all duration-200 ${ className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md min-w-[140px] border transition-colors duration-200 ${
isMaestroing isMaestroing
? 'bg-kithara-accent/20 text-kithara-accent animate-pulse' ? 'bg-kithara-accent/20 border-kithara-accent/30 text-kithara-accent animate-pulse'
: 'bg-kithara-accent/10 text-kithara-accent hover:bg-kithara-accent/25 border border-kithara-accent/30 hover:border-kithara-accent/50' : 'bg-kithara-accent/10 border-kithara-accent/30 hover:bg-kithara-accent/25 hover:border-kithara-accent/50 text-kithara-accent'
}`} }`}
title={mode === 'generate' title={mode === 'generate'
? "Let Maestro write a creative prompt for you" ? "Let Maestro write a creative prompt for you"
: "Let Maestro complete your prompt with musical details" : "Let Maestro complete your prompt with musical details"
} }
> >
{isMaestroing ? ( {isMaestroing ? (
<> <>
<span className="inline-block animate-spin">♩</span> <span className="inline-block animate-spin">♩</span>
{mode === 'generate' ? 'Dreaming...' : 'Composing...'} <span className="truncate">
</> {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
) : ( </span>
label </>
)} ) : (
<span className="truncate">{label}</span>
)}
</button> </button>
) )
} }