Page MenuHomePhabricator

MenuButton visually cropped in table with few rows
Closed, ResolvedPublic

Description

As a follow up to T369934: [Timebox] MenuButton gets cut off in a table, action menus appear to be visually cut off in tables in certain circumstances.

When there are only a few line items in a table where each row contains a hover-able action menu link, hovering over the menu link shows a cropped menu box that the user needs to scroll thru in order to see all options:

Screenshot 2024-11-14 at 10.44.09 AM.png (1,660×814 px, 245 KB)

Screenshot 2024-11-14 at 10.43.30 AM.png (2,152×894 px, 167 KB)

Screenshot 2024-11-14 at 17.39.32.png (574×358 px, 23 KB)

It would be a better user experience if the action menu were fully visible in this particular circumstance where the table container is smaller than the rendered view of the action menu.

Note: this issue does not occur when there are more rows in a table.

Reproducible at https://mpic-next.wikimedia.org/ which at the time of this writing contains 2 rows.

As a workaround for desktop, we can override styles to prevent this behavior:

.my-class .cdx-table__table-wrapper {
    overflow: unset;
}

Reference: https://wikimedia.slack.com/archives/C03DKGSEPL2/p1731606591247599

Event Timeline

cjming renamed this task from MenuButton visually cropped in table with few line items to MenuButton visually cropped in table with few rows.Nov 14 2024, 6:18 PM
cjming updated the task description. (Show Details)

Note for future investigation:

The Codex Menu component uses FloatingUI to handle positioning behavior. FloatingUI exposes a method called detectOverflow which we could use to develop some custom behavior rules (this would live in a new custom middleware object that we would need to implement). For example, we could add some kind of escapeOverflow middlware that could allow a menu to break out of its overflow context if it appears within a Table, a Dialog, etc.

CCiufo-WMF changed the task status from Open to Stalled.Nov 18 2024, 9:36 PM
CCiufo-WMF subscribed.

Waiting on T380220 which will hopefully provide a solution.

CCiufo-WMF raised the priority of this task from High to Needs Triage.Nov 18 2024, 9:36 PM
CCiufo-WMF moved this task from Needs Refinement to Backlog on the Design-System-Team board.

Change #1163426 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Table, MenuButton: Ensure menu can overflow table

https://gerrit.wikimedia.org/r/1163426

AnneT changed the task status from Stalled to In Progress.Jun 24 2025, 5:16 PM
AnneT claimed this task.
AnneT moved this task from Backlog to In Progress on the Codex board.

Change #1163426 merged by jenkins-bot:

[design/codex@main] Table, MenuButton: Ensure menu can overflow table

https://gerrit.wikimedia.org/r/1163426

Change #1178961 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.0

https://gerrit.wikimedia.org/r/1178961

Test wiki created on Patch demo by LMora-WMF using patch(es) linked to this task:
https://52ad408a3b.catalyst.wmcloud.org/w/

Change #1178961 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.0

https://gerrit.wikimedia.org/r/1178961

Change #1180982 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.1

https://gerrit.wikimedia.org/r/1180982

Test wiki created on Patch demo by LMora-WMF using patch(es) linked to this task:
https://590db65713.catalyst.wmcloud.org/w/

Change #1180982 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.1

https://gerrit.wikimedia.org/r/1180982

Volker_E reassigned this task from Catrope to AnneT.
Volker_E updated Other Assignee, added: Catrope.
Volker_E added a subscriber: Catrope.

Test wiki on Patch demo by LMora-WMF using patch(es) linked to this task was deleted:

https://590db65713.catalyst.wmcloud.org/w/

Test wiki on Patch demo by LMora-WMF using patch(es) linked to this task was deleted:

https://52ad408a3b.catalyst.wmcloud.org/w/