fix(rotator): the SP/LP readout goes BELOW the dial

The wrapper around the svg was a flex ROW, so a sibling landed beside the
compass instead of under it. Column, and the readout spans the full width.

frontend/src/components/RotorCompass.tsx

@@ -128,7 +128,9 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
         </div>
       )}
 
-      <div className="flex items-center justify-center p-2 min-h-0">
+      {/* flex-col: the readout goes BELOW the dial. This wrapper was a row, so a
+          sibling of the <svg> landed beside it. */}
+      <div className="flex flex-col items-center justify-center p-2 min-h-0">
         <svg
           viewBox={`0 0 ${SIZE} ${SIZE}`}
           className={onGoto ? 'cursor-pointer select-none' : 'select-none'}
@@ -196,7 +198,7 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
             Here because it belongs to the compass: every place that draws one
             gets the readout, instead of each caller inventing its own.
             Clickable when the caller can turn, like the status bar's. */}
-        <div className="flex gap-1.5 mt-2 font-mono">
+        <div className="flex gap-1.5 mt-2 font-mono w-full">
           {([['SP', bearing ?? null], ['LP', bearing == null ? null : (bearing + 180) % 360]] as const).map(([lbl, az]) => (
             <button key={lbl} type="button" disabled={az == null || !onGoto}
               onClick={() => { if (az != null && onGoto) onGoto(Math.round(az)); }}