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:
1 parent
ca18f03a0f
commit
b08d0b6782
1 file changed
+13
-11
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user