style(matrix): pin the label column so RTTY cannot shift it

The width was set for three characters, so the column grew when the
rotation came round to RTTY and every band beneath it moved — which the
eye reads as the matrix sliding rather than the row changing. Sized once
for the longest label it can show and pinned there, header spacer
included; past four characters (PSK31, MSK144) the type gives way
instead of the column.

changelog.json

@@ -3,10 +3,10 @@
     "version": "0.27.8",
     "date": "",
     "en": [
-      "The band matrix’s DIG row is now a rotation: click it and it answers for FT8, then FT4, then each digital mode your mode list holds — in YOUR order — then back to DIG. One row per digital mode would be the honest layout and there is no height for it beside the other widgets, so the row keeps its place and changes what it says."
+      "The band matrix’s DIG row is now a rotation: click it and it answers for FT8, then FT4, then each digital mode your mode list holds — in YOUR order — then back to DIG. One row per digital mode would be the honest layout and there is no height for it beside the other widgets, so the row keeps its place and changes what it says. The label column is sized once for the longest mode it can show, so the matrix never shifts as the rotation comes round to RTTY."
     ],
     "fr": [
-      "La ligne DIG de la matrice devient une rotation : un clic et elle répond pour FT8, puis FT4, puis chaque mode numérique de votre liste — dans VOTRE ordre — puis retour à DIG. Une ligne par mode numérique serait la mise en page honnête et la hauteur manque à côté des autres widgets : la ligne garde donc sa place et change ce qu’elle dit."
+      "La ligne DIG de la matrice devient une rotation : un clic et elle répond pour FT8, puis FT4, puis chaque mode numérique de votre liste — dans VOTRE ordre — puis retour à DIG. Une ligne par mode numérique serait la mise en page honnête et la hauteur manque à côté des autres widgets : la ligne garde donc sa place et change ce qu’elle dit. La colonne des libellés est dimensionnée une fois pour le plus long mode qu’elle peut afficher : la matrice ne bouge donc plus quand la rotation arrive sur RTTY."
     ]
   },
   {

frontend/src/components/BandSlotGrid.tsx

@@ -334,7 +334,7 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, modes,
       <table className="border-separate" style={{ borderSpacing: 3 }}>
         <thead>
           <tr>
-            <th className="w-[26px]" />
+            <th className="w-[38px] min-w-[38px] max-w-[38px]" />
             {cols.map((b) => (
               <th
                 key={b.tag}
@@ -363,11 +363,14 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, modes,
                   onClick={clsBase === 'DIG' && digModes.length ? cycleDig : undefined}
                   title={clsBase === 'DIG' && digModes.length ? t('bsg.digCycle') : undefined}
                   className={cn(
-                    'font-mono font-semibold pr-1.5 text-right w-[26px]',
+                    // Sized once for the LONGEST label the rotation can show,
-                    // RTTY and PSK31 do not fit at 11px in a column sized for
+                    // and pinned there: a column that grows when RTTY comes
-                    // three characters, and widening it would push the whole
+                    // round shifts every band beneath it, and the eye reads
-                    // matrix sideways.
+                    // that as the matrix moving rather than the row changing.
-                    cls.length > 3 ? 'text-[9px]' : 'text-[11px]',
+                    'font-mono font-semibold pr-1.5 text-right w-[38px] min-w-[38px] max-w-[38px] overflow-hidden',
+                    // Beyond four characters (PSK31, MSK144) the type gives way
+                    // instead of the column.
+                    cls.length > 4 ? 'text-[9px]' : 'text-[11px]',
                     clsBase === 'DIG' && digModes.length ? 'cursor-pointer hover:text-foreground' : '',
                     classCurrent ? 'text-primary font-extrabold' : 'text-muted-foreground',
                   )}