Page MenuHomePhabricator

EditCheck: Responsive behavior
Open, Needs TriagePublic

Description

Background

At the moment, the edit check reacts to device so the bottom sheet just appears on touchable devices. So if you resize the screen on desktop, the Edit Check occupies too much space, leaving insufficient space for the article being edited (check the patch).

Captura de pantalla 2025-06-16 a las 17.00.44.png (602×632 px, 110 KB)

Proposed solution

The EditCheck could react instead to breakpoints si it behaves as a bottom sheet when the screen width reaches the @breakpoint-tablet (1119px or below). This would allow the EditCheck to adjust based on screen size rather than on device (touchable screen devices), ensuring the article always has enough space when editing on small screens.

image.png (7,337×2,030 px, 2 MB)

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

  • Make the bottom sheet react to breakpoint instead of device

Future work

  • If applicable, list future work that should be done once this task is implemented. You should open new, standalone tasks for all future work.

Event Timeline

This might be confusing as there's functional differences between the mobile version and the desktop version when you have multiple checks -- it goes from being able to see multiple checks to one and paging between them. The mobile version also has a lot of behaviors around when the card is shown/hidden based on expecting an onscreen keyboard to be used which probably shouldn't apply to a super-narrow desktop window.