Page MenuHomePhabricator

Make Dialog and Popover more responsive
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

Dialog and Popover both have properties to stack the actions vertically. This feature is ideal for smaller screens and touch devices. Currently, the property is not automatically applied on smaller screens.

Goal

Make Dialog and Popover more responsive by default by automatically applying the stackedActions prop at the min-width-breakpoint-mobile or min-width-breakpoint-tablet breakpoint, whichever we decide works better during implementation.

Acceptance criteria

  • Dialog and Popover automatically apply the stackedActions prop at the appropriate breakpoint

Event Timeline

Gauthammohanraj subscribed.

I would like to work on this task.

Great, thank you @Gauthammohanraj please let us know if you have any questions as you get working on it. I'll move this task to in progress.

Change #1187456 had a related patch set uploaded (by Gauthammohanraj; author: Gauthammohanraj):

[design/codex@main] Dialog, Popover: Automatically apply stackedActions on small screens

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

I have made the patch for this. Could I work on another issue while this is being reviewed ?

Thanks @Gauthammohanraj! We will review the patch. Though these tasks are not completely defined yet, they might be good follow up tasks to this one.

T321893: Dialog: Evaluate fullscreen on mobile
T386144: Popover: create mobile-version in Codex

If you're willing to take these on, I can help coordinate design support for these.

Hi @Gauthammohanraj are you still able to work on finishing this task/patch?

Sorry I had some exam over the past week. I will make the changes as requested by end of this week.

No problem, just checking in. :) Thank you!

I have made the changes as requested. Apologies for the delay.

HSwan-WMF set the point value for this task to 2.Sep 24 2025, 5:00 PM

Change #1187456 merged by jenkins-bot:

[design/codex@main] Dialog, Popover: Automatically apply stackedActions on small screens

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

Change #1193472 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] Dialog, Popover: Clean up responsiveness styles

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

Change #1193472 merged by jenkins-bot:

[design/codex@main] Dialog, Popover: Clean up responsiveness styles

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

ovasileva changed the point value for this task from 2 to 1.Oct 28 2025, 4:53 PM
ovasileva subscribed.

Moving into the sprint for QA

QA test plan

Test the component's mobile responsiveness.

Steps to replicate:

1. Dialog's mobile responsiveness

  • Test in mobile emulation.
  • Verify that buttons inside the cdx-dialog__footer__actions are vertically stacked on mobile.
Example

iOS 16.0

Dialog buttons are vertically stacked.

Simulator Screenshot - iPhone 14 - T399289_dialog_dark.png (2×1 px, 482 KB)
Simulator Screenshot - iPhone 14 - T399289_dialog_light.png (2×1 px, 428 KB)

2. Popover's mobile responsiveness

  • Test in mobile emulation.
  • Verify that buttons inside the cdx-popover__footer__actions are vertically stacked on mobile.
Example

iOS 16.0

Popover buttons are vertically stacked.

Simulator Screenshot - iPhone 14 - T399289_popover_dark.png (2×1 px, 521 KB)
Simulator Screenshot - iPhone 14 - T399289_popover_light.png (2×1 px, 463 KB)
egardner subscribed.

Looks good! Thanks @Gauthammohanraj for your contribution!

Change #1211730 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v2.3.2 to v2.3.3

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

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:
https://ebaf825438.catalyst.wmcloud.org/w/

Change #1211730 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.3.2 to v2.3.3

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