Server settings → People: a row's menu is cut off inside the table, and nobody has a picture there #310

New issue

Closed

opened 2026-09-29 11:26:41 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-29 11:26:41 +00:00

Owner

From the interface review of 2026-09-29.

Opening a row's ⋮ menu on Server settings → People draws it inside the table's box, where it is cut off: its lower items can be reached only by scrolling the table.

The cause: the table sits in <c-scroll-box> (cotton/scroll_box.html), whose .scroll-x class sets overflow-x: auto (assets/css/app.css). A box that scrolls on one axis clips on both, and the menu (cotton/dropdown_menu.html, a <details> with an absolutely positioned [data-popover]) is laid out inside it. The last rows are the worst, with no table left below the trigger.

Ways out, for whoever takes it on:

Put the panel in the top layer with the Popover API. popover on the panel and popovertarget on a button open it without a script, and no ancestor can clip a box in the top layer. CSS anchor positioning then ties it to its trigger.
Open upwards when there is no room below.

The People table is the only place today where a row menu sits inside a scroll box, but the fix belongs in the component, ready for the next one.

A picture for each person

Add the person's avatar as the first column: the same {% avatar %} the header draws, at row size. It is decorative (alt=""), because the username beside it already names the row. In the phone layout (table-cards) it goes at the head of each card.

Done when

The browser suite opens the last row's menu with the table scrolled and finds every item visible and clickable, in both layouts.
The avatar column passes axe in both themes and reflows at 320 pixels.

From the interface review of 2026-09-29. ## The menu (a defect) Opening a row's ⋮ menu on *Server settings → People* draws it inside the table's box, where it is cut off: its lower items can be reached only by scrolling the table. The cause: the table sits in `<c-scroll-box>` (`cotton/scroll_box.html`), whose `.scroll-x` class sets `overflow-x: auto` (`assets/css/app.css`). A box that scrolls on one axis clips on both, and the menu (`cotton/dropdown_menu.html`, a `<details>` with an absolutely positioned `[data-popover]`) is laid out inside it. The last rows are the worst, with no table left below the trigger. Ways out, for whoever takes it on: - Put the panel in the top layer with the Popover API. `popover` on the panel and `popovertarget` on a button open it without a script, and no ancestor can clip a box in the top layer. CSS anchor positioning then ties it to its trigger. - Open upwards when there is no room below. The People table is the only place today where a row menu sits inside a scroll box, but the fix belongs in the component, ready for the next one. ## A picture for each person Add the person's avatar as the first column: the same `{% avatar %}` the header draws, at row size. It is decorative (`alt=""`), because the username beside it already names the row. In the phone layout (`table-cards`) it goes at the head of each card. ## Done when - The browser suite opens the last row's menu with the table scrolled and finds every item visible and clickable, in both layouts. - The avatar column passes axe in both themes and reflows at 320 pixels.

tiagoagueda added this to the 0.5.0 milestone

2026-09-29 11:26:41 +00:00

tiagoagueda added the

bug

accessibility

interface

labels

2026-09-29 11:26:41 +00:00

tiagoagueda referenced this issue from a commit

2026-09-29 21:40:58 +00:00

Draw every menu in the top layer, and give each person on People a picture

tiagoagueda closed this issue