Account menu: a quarter wider, and a long name or address cut short rather than wrapped #834

New issue

Closed

opened 2026-10-10 15:50:07 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 15:50:07 +00:00

Owner

The account menu should be about 25 % wider to fit long email addresses, and a very long address or name should be cut with an ellipsis, not wrapped.

What exists today

The menu is <c-dropdown-menu kind="navigation"> at templates/base.html:192-245. Its width is the global [data-popover] { @apply w-56 max-w-[calc(100vw-2rem)] } (assets/css/basecoat.css:182-184) shared by every popover: the + menu, row menus, More.
The name is already truncate (base.html:207). The address is break-words (:213), on purpose (#282, comment :208-212): truncation would hide part of it under the text-spacing override (SC 1.4.12), and the full address was nowhere else on the page.

What would change

A hook on the account menu (e.g. data-account-menu) and a scoped rule giving its panel w-70 (17.5 rem, 25 % over 14 rem), keeping the max-w clamp; the other popovers keep w-56.
The address truncate, with the full text in title and still in the accessibility tree.

Decisions

Reversing #282. Recommended: accept it. CSS truncation keeps the whole text for a screen reader, the address is shown in full on Your details, and a title shows it on hover; what is lost is only the visual wrap under a text-spacing override, for an address long enough to fill 17.5 rem.

Tests find the menu by its Account menu label (tests/e2e/test_direction.py:168-170, tests/e2e/test_keyboard_and_focus.py:88,103).

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

The account menu should be about 25 % wider to fit long email addresses, and a very long address or name should be cut with an ellipsis, not wrapped. ## What exists today - The menu is `<c-dropdown-menu kind="navigation">` at `templates/base.html:192-245`. Its width is the **global** `[data-popover] { @apply w-56 max-w-[calc(100vw-2rem)] }` (`assets/css/basecoat.css:182-184`) shared by every popover: the + menu, row menus, *More*. - The name is already `truncate` (`base.html:207`). The address is `break-words` (`:213`), on purpose (#282, comment `:208-212`): truncation would hide part of it under the text-spacing override (SC 1.4.12), and the full address was nowhere else on the page. ## What would change - A hook on the account menu (e.g. `data-account-menu`) and a scoped rule giving its panel `w-70` (17.5 rem, 25 % over 14 rem), keeping the `max-w` clamp; the other popovers keep `w-56`. - The address `truncate`, with the full text in `title` and still in the accessibility tree. ## Decisions - **Reversing #282.** Recommended: accept it. CSS truncation keeps the whole text for a screen reader, the address is shown in full on *Your details*, and a `title` shows it on hover; what is lost is only the visual wrap under a text-spacing override, for an address long enough to fill 17.5 rem. Tests find the menu by its *Account menu* label (`tests/e2e/test_direction.py:168-170`, `tests/e2e/test_keyboard_and_focus.py:88,103`). Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 15:50:07 +00:00

tiagoagueda added the

accessibility

interface

enhancement

labels

2026-10-10 15:50:08 +00:00

tiagoagueda self-assigned this

2026-10-10 17:52:49 +00:00

tiagoagueda commented

2026-10-11 10:32:15 +00:00