Page MenuHomePhabricator

OOUI buttons with large labels breaks width of several special pages in mobile view
Open, Needs TriagePublic

Description

As already mentioned in T235414, it looks like in the new AMC watchlist the (language-dependent) size of the initial buttons can break the screen width.

I experience the same thing on the notification page, where the buttons are aligned next to each other, which makes the whole thing way too large.

With new notifications there’s another issue, apparently the “time stamp” is always hidden outside the right window border; however, here at least the screen size isn’t affected, so you can scroll sideways to see all.

The last two issues can be experienced in normal mobile view as well, so it might be a general problem; however, it has definitely become more visible now with AMC, since that’s basically my landing page.

I’m using Safari on the last version of iOS, testing it with smallest screen size (iPod touch). Language setting is always German.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 4 2019, 11:22 AM

@XanonymusX What is your screen dimension? I mean how big your screen is? I am not experiencing this problem as I probably have a bigger screen. Though I agree that Minerva skin should be responsive and compatible with all mobile devices.

Well, the iPod touch is supposed to be 1136*640 px (per https://www.apple.com/lae/ipod-touch/specs/ ); as I said, it is indeed the smallest screen size available to me, and I usually test everything on it.

Jdlrobson edited projects, added OOUI; removed MinervaNeue.Nov 4 2019, 2:38 PM
TheDJ added a subscriber: TheDJ.EditedNov 4 2019, 3:35 PM

With new notifications there’s another issue, apparently the “time stamp” is always hidden outside the right window border; however, here at least the screen size isn’t affected, so you can scroll sideways to see all.

The notifications (specifically .mw-echo-ui-notificationItemWidget-content-table) uses table layout, which is highly susceptible to viewport overflow due to long words, because table layouts have content dimensions take precedence over viewport restrictions. There is also some missing border-box statements where width:100% is used.

This seems like a place where at smaller resolutions we should be using flex box sizing.

I've previously indicated similar issues with the Recent Changes page and the Watchlist btw... T197065: New Filters for Edit Review: UI displays poorly when the window is narrow
On such narrow layouts, you need to think in wrapping rows and take lots of cues from bootstrap grid honestly, all this mucking about with relative positioning and table-cell etc is something you should do AFTER you have defined a proper wrapping row grid basis for the most narrow situations.

Now this is a very small subset, so the priority is low of course, but we really need to start inverting our design process from desktop to 'as narrow as we are willing to support' and then enhance per viewport breakpoint.

Every time we have to retroactively have to 'down design' a UI as Recent changes to mobile is just problematic in my opinion.

Jdlrobson renamed this task from Button size breaks width of several special pages in mobile view to OOUI buttons with large labels breaks width of several special pages in mobile view.Nov 4 2019, 5:43 PM
Jdlrobson added a subscriber: Jdlrobson.

we really need to start inverting our design process from desktop to 'as narrow as we are willing to support' and then enhance per viewport breakpoint.

👏👏👏👏👏👏👏👏👏