m/postcards
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

UX: collapse verbose field hints behind an ⓘ info button (right of the field) #27

New Issue
Closed
opened 2026-06-17 13:26:48 +00:00 by mAi · 1 comment
mAi commented 2026-06-17 13:26:48 +00:00
Collaborator
Copy Link

What (m, PWA)

m: „vielleicht packen wir den Infotext hinter einen i-Button rechts vom Feld? Nicht jeder braucht die ausführliche Erläuterung.“

The compose form has verbose German hint paragraphs under several fields (custom-URL/slug, expiry, max-views, password, audience, etc.). They make the form noisy. Move each verbose hint behind a small „ⓘ“ info button placed to the right of the field/label; the hint is hidden by default and revealed on tap/click. Casual users get a clean form; the detail is one tap away.

Design

  • A small, unobtrusive „ⓘ“ control next to the field label / right of the field. Click/tap toggles the hint (inline expand, popover, or tooltip — pick the cleanest that works well on mobile).
  • Keep the hint content (the existing explanations) — just collapse it behind the button. Don't delete the text.
  • Mobile-first: tap-to-toggle (hover-only tooltips don't work on touch). Accessible: button has an aria-label, hint associated via aria-describedby; works without JS as a graceful fallback (e.g. <details>/<summary> so it still expands with no JS).
  • Apply consistently to the fields that currently have verbose hints.

Constraints

German + Umlaute, mobile-first, CSS-var styling. No content loss, no feature regression. Coexists with the field/label restyle (#23/#24/#25) and the Anrede change (#26).

Sequencing

Compose-flow UI → same single-worker track, after the styling block (#23/#24/#25) and #26 (Anrede). otto-head may bundle it with #26 if sizing allows; assigns when the track frees.

DoD

  • Verbose hints hidden by default behind an ⓘ button right of each field; tap/click reveals; content preserved; works on mobile + (gracefully) without JS; accessible.
  • build green; commit references this issue.
## What (m, PWA) m: *„vielleicht packen wir den Infotext hinter einen i-Button rechts vom Feld? Nicht jeder braucht die ausführliche Erläuterung.“* The compose form has verbose German hint paragraphs under several fields (custom-URL/slug, expiry, max-views, password, audience, etc.). They make the form noisy. Move each verbose hint **behind a small „ⓘ“ info button placed to the right of the field/label**; the hint is **hidden by default** and revealed on tap/click. Casual users get a clean form; the detail is one tap away. ## Design - A small, unobtrusive „ⓘ“ control next to the field label / right of the field. Click/tap toggles the hint (inline expand, popover, or tooltip — pick the cleanest that works well on mobile). - **Keep the hint content** (the existing explanations) — just collapse it behind the button. Don't delete the text. - Mobile-first: tap-to-toggle (hover-only tooltips don't work on touch). Accessible: button has an aria-label, hint associated via aria-describedby; works without JS as a graceful fallback (e.g. `<details>`/`<summary>` so it still expands with no JS). - Apply consistently to the fields that currently have verbose hints. ## Constraints German + Umlaute, mobile-first, CSS-var styling. No content loss, no feature regression. Coexists with the field/label restyle (#23/#24/#25) and the Anrede change (#26). ## Sequencing Compose-flow UI → same single-worker track, after the styling block (#23/#24/#25) and #26 (Anrede). otto-head may bundle it with #26 if sizing allows; assigns when the track frees. ## DoD - Verbose hints hidden by default behind an ⓘ button right of each field; tap/click reveals; content preserved; works on mobile + (gracefully) without JS; accessible. - build green; commit references this issue.
mAi commented 2026-06-17 13:50:37 +00:00
Author
Collaborator
Copy Link

✅ Merged & deployed (merge f281b85)

Verified live on sendmy.cards: Anrede renders verbatim (no „für“/„An:“ prefix), free-text field „Anrede (optional)“ works in all modes incl. broadcast; verbose field hints collapsed behind ⓘ

(no-JS + accessible, content preserved). build/vet/test green. Not closing — m closes.

## ✅ Merged & deployed (merge `f281b85`) Verified live on sendmy.cards: Anrede renders verbatim (no „für“/„An:“ prefix), free-text field „Anrede (optional)“ works in all modes incl. broadcast; verbose field hints collapsed behind ⓘ <details> (no-JS + accessible, content preserved). build/vet/test green. Not closing — m closes.
mAi closed this issue 2026-06-23 15:48:04 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/postcards#27
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?