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.
This commit is contained in:
2026-08-13 11:48:59 +02:00
parent 784d809290
commit 8fccfa29b1
2 changed files with 7 additions and 4 deletions
+1
View File
@@ -1408,6 +1408,7 @@ func (a *App) startup(ctx context.Context) {
go a.sendTelemetryHeartbeat() go a.sendTelemetryHeartbeat()
go a.liveStatusLoop() // multi-op: heartbeat current activity to shared MySQL go a.liveStatusLoop() // multi-op: heartbeat current activity to shared MySQL
go a.chatLoop() // multi-op: poll the shared chat + heartbeat presence go a.chatLoop() // multi-op: poll the shared chat + heartbeat presence
go a.hrdlogOnAirLoop() // publish frequency/mode/rig on hrdlog.net when enabled
// Locator store BEFORE the feed: the feed asks whether it exists to decide // Locator store BEFORE the feed: the feed asks whether it exists to decide
// which bands to subscribe to. // which bands to subscribe to.
a.startGridCache() a.startGridCache()
+4 -2
View File
@@ -128,7 +128,9 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
</div> </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 <svg
viewBox={`0 0 ${SIZE} ${SIZE}`} viewBox={`0 0 ${SIZE} ${SIZE}`}
className={onGoto ? 'cursor-pointer select-none' : 'select-none'} 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 Here because it belongs to the compass: every place that draws one
gets the readout, instead of each caller inventing its own. gets the readout, instead of each caller inventing its own.
Clickable when the caller can turn, like the status bar's. */} 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]) => ( {([['SP', bearing ?? null], ['LP', bearing == null ? null : (bearing + 180) % 360]] as const).map(([lbl, az]) => (
<button key={lbl} type="button" disabled={az == null || !onGoto} <button key={lbl} type="button" disabled={az == null || !onGoto}
onClick={() => { if (az != null && onGoto) onGoto(Math.round(az)); }} onClick={() => { if (az != null && onGoto) onGoto(Math.round(az)); }}