rouggy/OpsLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

ui: compact Stations-on-air rows to single line so 5+ fit without scrolling

Browse Source
This commit is contained in:
rouggy
2026-07-20 19:36:01 +02:00
parent 2fbb922bd2
commit 3ec23bc613
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+8 -12
View File
@@ -4308,31 +4308,27 @@ export default function App() {
<X className="size-3.5" /> <X className="size-3.5" />
</button> </button>
</div> </div>
<div className="flex-1 min-h-0 overflow-auto p-1.5 flex flex-col gap-1"> <div className="flex-1 min-h-0 overflow-auto p-1 flex flex-col gap-0.5">
{liveStations.filter((s) => s.online).length === 0 ? ( {liveStations.filter((s) => s.online).length === 0 ? (
<p className="text-xs text-muted-foreground italic px-1 py-2">{t('live.stationsEmpty')}</p> <p className="text-xs text-muted-foreground italic px-1 py-2">{t('live.stationsEmpty')}</p>
) : liveStations.filter((s) => s.online).map((s, i) => { ) : liveStations.filter((s) => s.online).map((s, i) => {
const mc = modeAccent(s.mode); const mc = modeAccent(s.mode);
// Single compact row so 5+ stations fit without scrolling.
return ( return (
<div key={i} className={cn('flex items-center gap-2 rounded-md px-2 py-1.5 border', s.online ? 'bg-muted/40 border-border' : 'border-transparent opacity-60')}> <div key={i} className={cn('flex items-center gap-1.5 rounded-md px-1.5 py-1 border', s.online ? 'bg-muted/40 border-border' : 'border-transparent opacity-60')}>
<span className={cn('size-2 rounded-full shrink-0', s.online ? 'bg-danger animate-pulse' : 'bg-muted-foreground/40')} <span className={cn('size-2 rounded-full shrink-0', s.online ? 'bg-danger animate-pulse' : 'bg-muted-foreground/40')}
title={s.online ? t('live.onAir') : t('live.offline')} /> title={s.online ? t('live.onAir') : t('live.offline')} />
<div className="min-w-0 flex-1"> <span className="text-xs font-bold font-mono truncate shrink-0 max-w-[72px]" title={s.operator}>{s.operator}</span>
<div className="flex items-baseline gap-1.5 min-w-0"> <span className="font-mono text-[11px] font-semibold tabular-nums shrink-0" style={{ color: mc }}>
<span className="text-xs font-bold font-mono truncate">{s.operator}</span>
{s.version && <span className="text-[9px] text-muted-foreground shrink-0 tabular-nums ml-auto">v{s.version}</span>}
</div>
<div className="flex items-center gap-1.5 mt-0.5 min-w-0">
<span className="font-mono text-[11px] font-semibold tabular-nums" style={{ color: mc }}>
{s.freq_hz ? (s.freq_hz / 1e6).toFixed(3) : '—'} {s.freq_hz ? (s.freq_hz / 1e6).toFixed(3) : '—'}
</span> </span>
{s.mode && ( {s.mode && (
<span className="text-[9px] font-bold uppercase px-1.5 rounded-full leading-[15px] shrink-0" <span className="text-[9px] font-bold uppercase px-1 rounded-full leading-[15px] shrink-0"
style={{ background: `${mc}22`, color: mc }}>{s.mode}</span> style={{ background: `${mc}22`, color: mc }}>{s.mode}</span>
)} )}
{s.band && <span className="text-[10px] text-muted-foreground shrink-0">{s.band}</span>} {s.band && <span className="text-[10px] text-muted-foreground shrink-0">{s.band}</span>}
</div> <span className="flex-1" />
</div> {s.version && <span className="text-[9px] text-muted-foreground shrink-0 tabular-nums">v{s.version}</span>}
</div> </div>
); );
})} })}