feat(entry): narrower left column, and a State field

Name, Band, Mode and Country go from 300px to 210px, which moves QTH, Comment
and Note left by the same amount. The width is set in TWO places — the Name row
and the Band/Mode/Country stack below it — and they have to stay equal or the
two rows stop lining up, so both were changed together.

State goes between QTH and the locator: it is part of the same "where is this
station" reading, and it is what WAS and the US county work key off. Narrow,
since it holds two or three characters, and upper-cased on the way in like the
other coded fields.

The Name label in this layout was hardcoded English while its twin went through
t(); fixed while here.
This commit is contained in:
2026-08-13 10:56:52 +02:00
parent d0f06d9670
commit 741364bf99
3 changed files with 17 additions and 6 deletions
+11 -2
View File
@@ -4439,6 +4439,15 @@ export default function App() {
onBlur={() => setQth(titleCase)} />
</div>
);
// State sits between QTH and the locator: it is part of the same "where is
// this station" reading, and it is what several awards key off (WAS, the US
// county work). Narrow — it holds two or three characters.
const stateBlock = (
<div className="flex flex-col w-[70px] shrink-0"><Label className="mb-1 h-3.5">{t('field.state')}</Label>
<Input value={details.state ?? ''} className="font-mono"
onChange={(e) => setDetails((d) => ({ ...d, state: e.target.value.toUpperCase() }))} />
</div>
);
const gridBlock = (
<div className="flex flex-col w-[76px] shrink-0"><Label className="mb-1 h-3.5">{t('field.grid')}</Label>
<Input value={grid} placeholder="JN05" className="font-mono" onChange={(e) => { setGrid(e.target.value); markEdited('grid'); }} />
@@ -5886,7 +5895,7 @@ export default function App() {
to be pushed outside the entry panel and clipped. Wrapping drops
it to its own line instead, which stays readable. */}
<div className="flex gap-4 items-end flex-wrap">
<div className="flex flex-col w-[300px] shrink-0"><Label className="mb-1 h-3.5">Name</Label>
<div className="flex flex-col w-[210px] shrink-0"><Label className="mb-1 h-3.5">{t('field.name')}</Label>
<Input value={name} onChange={(e) => { setName(e.target.value); markEdited('name'); }}
onBlur={() => setName(titleCase)} />
</div>
@@ -5897,7 +5906,7 @@ export default function App() {
{/* Row 3: tight left detail column (Band/Mode/Country) and
single-line Comment/Note on the right. */}
<div className="flex gap-4 items-start">
<div className="flex flex-col gap-1.5 w-[300px] shrink-0">
<div className="flex flex-col gap-1.5 w-[210px] shrink-0">
{bandRow}
{modeRow}
{countryRow}