[Timebox] MenuButton gets cut off in a table
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	cjming
	Jul 12 2024, 7:01 PM

Description

The MenuButton action menu renders correctly in most line items of a table except when it doesn't:

Screenshot 2024-07-12 at 12.49.15 PM.png (1×2 px, 244 KB)

Screenshot 2024-07-12 at 12.49.02 PM.png (1×2 px, 245 KB)

Screenshot 2024-07-12 at 12.49.23 PM.png (1×1 px, 221 KB)

Screenshot 2024-07-12 at 12.49.31 PM.png (1×2 px, 242 KB)

The current application is still WIP but available to folks via IDP (CAS-SSO) which is required for access:
staging - https://mpic-next.wikimedia.org/
production - https://mpic.wikimedia.org/

Successful login will bring users to the Catalog view which is the table with MenuButtons in the screenshots above.

Our code for reference for the table in the screenshots:
https://gitlab.wikimedia.org/repos/data-engineering/mpic/-/blob/main/frontend/src/components/List.vue?ref_type=heads

Acceptance criteria

Prevent menu from opening in the completely wrong direction inside a Table
Consider trying to make it possible for menus to extend beyond the table they're within

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v1.10.0 to v1.11.0	mediawiki/core	master	+964 -362
FloatingUI: Use default fallbackStrategy	design/codex	main	+1 -2
demo: Add Table demo with row actions	design/codex	main	+46 -0

Customize query in gerrit

Related Objects

Mentioned In: T369350: MPIC: Fix action menu and/or table appearance when only a few instruments are listed

Event Timeline

cjming created this task.Jul 12 2024, 7:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 12 2024, 7:01 PM

cjming updated the task description. (Show Details)Jul 12 2024, 7:06 PM

CCiufo-WMF triaged this task as High priority.Jul 12 2024, 7:25 PM

CCiufo-WMF moved this task from Inbox to Up Next on the Design-System-Team board.

We will try to take a look at this next sprint (starting July 22), or this sprint if there's extra capacity.

cjming updated the task description. (Show Details)Jul 12 2024, 7:59 PM

matmarex subscribed.Jul 12 2024, 8:33 PM

CCiufo-WMF renamed this task from MenuButton gets cut off in a table to [Timebox] MenuButton gets cut off in a table.Jul 22 2024, 5:12 PM

CCiufo-WMF set the point value for this task to 3.

CCiufo-WMF moved this task from Up Next to DST-Sprint-28 (2024-07-22 to 2024-08-02) on the Design-System-Team board.Jul 22 2024, 6:03 PM

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-28 (2024-07-22 to 2024-08-02)); removed Design-System-Team.

AnneT changed the task status from Open to In Progress.Jul 23 2024, 6:51 PM

AnneT claimed this task.

AnneT moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-28 (2024-07-22 to 2024-08-02)) board.

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

[design/codex@main] demo: Add Table demo with row actions

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

gerritbot added a project: Patch-For-Review.Jul 24 2024, 9:06 PM

I submitted a patch with a new demo that reproduces this behavior in the Sandbox so you don't have to spin up MPIC to see the bug. There are 2 issues here:

Menus do not expand beyond the limits of the table (or possibly the table wrapper element). Should they?
FloatingUI seems to get confused by the MenuButton in the third row, maybe because it's on the threshold of whether the menu should open up or down, so it ends up opening down and at the start of the button when it should open up and at the end of the button. I think this is happening because we've set the fallbackStrategy to "initialPlacement", when in this case the default of "bestFit" would be better.

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

[design/codex@main] FloatingUI: Use default fallbackStrategy

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

@Catrope do you remember why you implemented the initialPlacement fallback strategy way back in this patch? I'm trying to figure out if it's needed - it's messing up the MenuButton behavior, and doesn't seem necessary for other components IMO but I'm not sure.

If it is necessary, we could add a FloatingMenuOption for the fallbackStrategy and only change it to bestFit for MenuButton.

I don't remember exactly, and comparing your patch to the last release, it does look like bestFit is better overall. I was concerned about the behavior if the height of the viewport is so small (or the height of the menu so great) that the menu doesn't completely fit either below or above, and I didn't want it to be too aggressive in moving from "below" to "above" in that case. However, initialPlacement seems to behave worse in every possible case, including that one, so I think we should change it per your patch.

• Catrope moved this task from In Progress to Pending Release on the Design-System-Team (DST-Sprint-28 (2024-07-22 to 2024-08-02)) board.Jul 24 2024, 11:49 PM

Change #1056602 merged by jenkins-bot:

[design/codex@main] demo: Add Table demo with row actions

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

@Catrope @egardner the first acceptance criterion is complete. I also think it's worth considering whether menus within Tables should be able to extend beyond the boundaries of the Table. If that seems beyond the scope of this task, you could open a new one.

Change #1056999 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] Update Codex from v1.9.0 to v1.10.0

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

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/1c9a4708c9/wiki/Main Page

Change #1056604 merged by jenkins-bot:

[design/codex@main] FloatingUI: Use default fallbackStrategy

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

cjming mentioned this in T369350: MPIC: Fix action menu and/or table appearance when only a few instruments are listed.Aug 6 2024, 6:04 PM

Change #1060504 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.10.0 to v1.11.0

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

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/e5da39d6d5/w

Change #1060504 merged by jenkins-bot: