From b08d0b6782e886a17c3d90941f2a73d2c0a6adc5 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Sun, 31 May 2026 10:28:14 -0400
Subject: [PATCH] fix: MaestroButton layout shift - stable min-width and
 persistent border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 frontend/src/components/MaestroButton.tsx | 24 ++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/MaestroButton.tsx b/frontend/src/components/MaestroButton.tsx
index e723294..f0141ff 100644
--- a/frontend/src/components/MaestroButton.tsx
+++ b/frontend/src/components/MaestroButton.tsx
@@ -75,24 +75,26 @@ export default function MaestroButton({
       type="button"
       onClick={handleMaestro}
       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
-          ? 'bg-kithara-accent/20 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/20 border-kithara-accent/30 text-kithara-accent animate-pulse'
+          : 'bg-kithara-accent/10 border-kithara-accent/30 hover:bg-kithara-accent/25 hover:border-kithara-accent/50 text-kithara-accent'
       }`}
       title={mode === 'generate'
         ? "Let Maestro write a creative prompt for you"
         : "Let Maestro complete your prompt with musical details"
       }
     >
-      {isMaestroing ? (
-        <>
-          <span className="inline-block animate-spin">♩</span>
-          {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
-        </>
-      ) : (
-        label
-      )}
+        {isMaestroing ? (
+          <>
+            <span className="inline-block animate-spin">♩</span>
+            <span className="truncate">
+              {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
+            </span>
+          </>
+        ) : (
+          <span className="truncate">{label}</span>
+        )}
     </button>
   )
 }
\ No newline at end of file