Several user menu items not present in smartphones

Contribute Bug

AI-generated summary

A user nuir reported that several user menu items are missing on small smartphone screens in Discourse 2.8.0, due to a flex layout issue causing elements to be pushed out of view. The problem was observed on devices with a 375px x 667px screen, including a real iPhone 7 and virtual devices in Firefox’s Responsive Design Mode. nuir provided screenshots showing the issue in both portrait and landscape orientations. awesomerobot confirmed the issue and noted it was fixed in a GitHub pull request 15964. nuir confirmed the fix resolved the issue on their device, though noted the fix was intended for even smaller devices than the iPhone 7, suggesting it also applies to the iPhone SE.

1

Hi. New user here, just to post this message, so sorry if it’s a duplicate (I haven’t found anything related to this, though).

On Discourse 2.8.0 there seems to be a problem with the user menu, either in a real smartphone with 375px x 667px screen, or in a virtual one (Firefox under Responsive Design Mode): as far as I have seen, the div id=“quick-access-profile” ul has a flex style that leads to some elements no being displayed on small screens.

As an example coming from discuss.pixls.us (but present in this very website, too) and captured with a real smartphone:

portrait
portrait292×500 17 KB

As far as I can tell, it seems that the flex style forces the first column to be almost as wide as the viewport, throwing those elements that don’t fit the vertical space out of the display (to the right).

As a curiosity, on my smartphone the logout element can’t be reached on a portrait view, while in Firefox under Responsive Design Mode it is the other way around (it’s in the landscape view where I can’t reach the logout element).

Hope this helps.

2 Likes
2

And this is the landscape view (as I’m a new user and can’t post 2 images in a single post):

landscape
landscape517×291 19 KB

4 Likes
3

Thanks for the detailed report! this sounds accurate. We’ll get it fixed.

4 Likes
5

This is fixed here:

https://github.com/discourse/discourse/pull/15964

4 Likes
6

Thanks! :smile:

It seems to work now here with my smartphone, although I don’t really get this:

(from github)
Increasing the breakpoint and decreasing the padding to get full coverage. Only applies to very tiny devices (even smaller than iPhone SE)

I guess you’re referring to the 2nd version of iPhone SE (based on the iPhone 8), but the iPhone 7 (mine) has the very same resolution (viewport), and it seems to be fixed for it too. So the fix also applies to iPhone SE, I think.

Anyway, it is solved now. Thanks again.

1 Like