Mobile: flyer fits width, board collapses to cards, fix always-shown identity box

Three mobile/responsive fixes (diagnosed at phone widths):

- Flyer no longer side-scrolls/clips on phones. In viewer mode .flyer-preview is
  a flexbox, so the sheet (a flex item) was shrunk to the viewport, making the
  fit math compute scale = 1 and the full-width content clip. Add flex: 0 0 auto
  so the sheet keeps its true print width and the transform scales it to fully
  fit the screen.

- Bulletin board collapses to a card per flyer on ≤640px: title + the ⋯ menu
  stay visible; the secondary columns (link, posted-by, language, date, event
  id) move behind a per-row "Details" disclosure (labeled via data-label). New
  details_label string × 14 languages.

- Fix a real (not mobile-only) bug: the editor's nsec-import box and
  "locked identity" row showed on every load because .identity-import's
  display:flex overrode the hidden attribute. Add .identity-import[hidden]
  { display:none } (same class of bug we hit on the board identity chip).

Adds e2e: flyer fits width with no horizontal overflow, identity controls hidden
until chosen, and the board's narrow-screen card + Details toggle. The desktop
"sortable columns" test pins a desktop viewport (the header is hidden in card
mode). 258 e2e across all six engines; docs updated.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-06-11 09:20:33 -04:00
1 parent 053ea875b8
commit 90e1bc8873
5 files changed
+175 -16

No files matched your search

+10
View File
@@ -288,6 +288,16 @@ de-duplicated per author+`d` identifier, keeping the latest.
pubkeys (`voxvera_blocked_pubkeys`) that always hides them, with a "Clear
blocked" control. The blocklist is local "hide this," separate from the
web-of-trust filter (roadmap #1).
- **Narrow screens (≤640px):** the table collapses to a card per flyer — the
**title** and the **⋯ menu** stay visible, and the secondary fields (link,
posted-by, language, date, event id) sit behind a per-row **Details**
disclosure (`.board-details-toggle` toggles `tr.expanded`; the columns become
labeled rows via their `data-label`).
On mobile the flyer preview scales to fully fit the screen width
(`updatePreviewScale` / `--flyer-preview-scale`): the sheet keeps its true print
width (`flex: 0 0 auto`, so the viewer-mode flexbox doesn't shrink it) and is
visually scaled with a transform — so it never side-scrolls or clips.
The login gate (Phase 1) and the web-of-trust filter (Phase 2) are in place.
Remaining gaps — degree-2 trust, a blocklist/report flow, NIP-05 badges, and