From 9281645359ab4ea316ab9f058c8838ea6c5c6269 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Mon, 29 Jun 2026 23:21:54 +0200
Subject: [PATCH] feat: better looking buttons in flexradio panel

---
 frontend/src/components/FlexPanel.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FlexPanel.tsx b/frontend/src/components/FlexPanel.tsx
index 5840f09..9b31e89 100644
--- a/frontend/src/components/FlexPanel.tsx
+++ b/frontend/src/components/FlexPanel.tsx
@@ -111,8 +111,11 @@ function Chip({ on, onClick, label, disabled, accent = 'emerald' }: {
   }[accent];
   return (
     <button type="button" onClick={onClick} disabled={disabled}
-      className={cn('w-14 shrink-0 px-2 py-1 rounded-md text-[11px] font-bold border transition-colors disabled:opacity-30',
-        on ? onCls : 'bg-card text-muted-foreground border-border hover:bg-muted')}>
+      className={cn(
+        // min width (not fixed) so a longer label like STONE keeps symmetric
+        // padding instead of overflowing; short labels (NB/NR/APF) stay aligned.
+        'min-w-[3.5rem] shrink-0 px-2.5 py-1 rounded-md text-[11px] font-bold border text-center tracking-wide transition-all disabled:opacity-30',
+        on ? cn(onCls, 'shadow-sm') : 'bg-card text-muted-foreground border-border hover:bg-muted hover:border-muted-foreground/30')}>
       {label}
     </button>
   );