Drop the redundant verb from the print labels, and clear the artwork
Some checks are pending
build-gate / build (push) Waiting to run

TWO SMALL FIXES, both Driver-reported by eye.

LABELS. The fieldset's legend already reads "Print Options", so "Print a" in
every button was three redundant words competing for the row's width, and the
printer emoji beside that legend added no information. Labels are now the object
only -- "UPG-100 list" / "UPG prayer poster" / "card deck" -- which fits two on
the first row and one on the second, as asked.

The aria-label keeps the full sentence ("Print the <list> UPG card deck"): a
screen-reader user does not get the legend's framing as reliably as a sighted
user reading down the fieldset, and a control announced as "card deck" alone is
ambiguous. Short visible label, descriptive accessible name.

POSITION. The options row overlapped the poster artwork by 12px. My first
measurement said that 12px was letterboxed white margin, because the image is
object-fit:contain -- but these posters fill the card's WIDTH, so contain
letterboxes at the SIDES and the bottom 12px is real artwork. Reading the
screenshot showed the legend printed across the poster's own footer line.
Geometry said white space; the image said otherwise.

bottom:-14px -> -26px. Overlap measured 12px -> 0px, and the screenshot now
shows the poster's footer text fully legible with the legend on the card's white
edge below it. The negative offset is kept rather than moving the row into flow,
because the tape header at top:-11px uses the same overhang idiom and the 26px
row gap was sized for that pairing.
This commit is contained in:
doxa-maps-88655c70 2026-09-23 16:54:54 +00:00
parent 4d9b90f3e3
commit f53dbcea72

View file

@ -603,7 +603,21 @@ useShadowStyles(
// is what made the latent one-button-per-row problem visible. `.pfs` is no
// longer a flex row; it wraps, and each `.pbtn` sizes to its own content instead
// of the row.
'.pfs{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);' +
// ★ SIT ON THE CARD'S EDGE, NOT ON THE ARTWORK (Driver, 2026-09-23: "it's overlapping the poster
// too much... it's supposed to be near the edge, slightly overlapping the white edge, but NOT the
// blue outline preview").
//
// THE MEASUREMENT THAT MISLED ME FIRST: at bottom:-14px the fieldset's top was 12px above the
// image element's bottom, and `img{object-fit:contain}` made "12px inside the image box" LOOK like
// letterboxed white margin. It is not — these posters fill the card's WIDTH, so contain letterboxes
// at the SIDES, and the bottom 12px is real artwork. Reading the screenshot showed the legend
// printed across the poster's own footer text. Geometry said white space; the image said otherwise.
//
// bottom:-26px clears the artwork: the fieldset's top now lands below the image box, so only its
// top border grazes the card edge — "slightly overlapping the white edge" as asked. The negative
// offset is kept (rather than moving the row into flow) because the tape-header at top:-11px uses
// the same overhang idiom, and the 26px row gap noted at :542 was sized for this pairing.
'.pfs{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);' +
'width:82%;margin:0;padding:0 4px 3px;border:1px solid rgba(0,0,0,.14);' +
'border-radius:2px;background:#fff;display:flex;flex-wrap:wrap;gap:2px 4px;' +
'justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.10)}' +
@ -755,12 +769,22 @@ useShadowStyles(
(openPrintWindow, shared by printList100/printPoster/printCardDeck) — no
silent file download as a primary action. LIST leads because it is what the
whole app is about (Driver's ordering). -->
<!-- ★ THE LEGEND ALREADY SAYS "PRINT OPTIONS" (line above), so repeating "Print a" in
every button is three redundant words competing for the row's width. Labels are the
OBJECT only; the verb lives in the legend that frames them. The emoji goes for the
same reason — a printer glyph beside a "Print Options" legend adds no information
and costs horizontal space that pushed the third button onto its own line.
★ THE ARIA-LABEL KEEPS THE FULL SENTENCE. A screen-reader user does not get the
legend's framing as reliably as a sighted user reading down the fieldset, and a
control announced as "card deck" is ambiguous — so the visible label shortens while
the accessible name stays "Print the <list> UPG card deck". check:a11y-button-names
requires a name; this keeps it descriptive rather than merely present. -->
<button type="button" class="pbtn pbtn-print" @click="printList100(list)"
:aria-label="`Print the ${list.label} UPG-100 list`">🖨 Print a UPG-100 list</button>
:aria-label="`Print the ${list.label} UPG-100 list`">UPG-100 list</button>
<button type="button" class="pbtn pbtn-print" @click="printPoster(list)"
:aria-label="`Print the ${list.label} UPG prayer poster`">🖨 Print a UPG prayer poster</button>
:aria-label="`Print the ${list.label} UPG prayer poster`">UPG prayer poster</button>
<button type="button" class="pbtn pbtn-print" @click="printCardDeck(list)"
:aria-label="`Print the ${list.label} UPG card deck`">🖨 Print a UPG card deck</button>
:aria-label="`Print the ${list.label} UPG card deck`">card deck</button>
</fieldset>
</div>
</div>