Do auto margins still need to be unset on mobile?

Contribute UX

AI-generated summary

The discussion revolves around whether auto margins still need to be unset on mobile devices, specifically for the main-outlet wrapper in Discourse. nolo points out that unsetting auto margins causes the layout to left-align on tablets in landscape mode, which is an issue. pmusaraj suggests that the rule can probably be dropped, as most themes should be fine. However, twofoursixeight can reproduce the issue on an Android tablet.

nolo proposes adding a breakpoint declaration to center the wrapper on wider devices while keeping the potential extra space removed on narrow mobile devices. pmusaraj thinks this option makes sense. After investigating, awesomerobot agrees that the rule is no longer needed, as the wrapper is now set to grid with width: 100%;, which should prevent the original issue. The rule has been removed in this pull request.

1

On mobile, auto margins for the main-outlet wrapper are unset here:

This causes the layout to left-align when -d-max-width is declared on a theme. It’s not visible on narrower devices, but on tablets in landscape mode it’s an issue, e.g. here with the Air theme:

The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)
The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)1746×1257 271 KB

I see the declaration was added because of
https://github.com/discourse/discourse/pull/16725

I generally don’t see the issue now on topic lists, maybe the declaration can be dropped? Or, if there’s some specific cases, rather be assigned for a breakpoint?

3 Likes
2

I think we can probably drop this rule, yes. It might cause some themes (especially custom themes) to have large margins on mobile, but most themes should be fine.

Note though that you’re seeing the mobile view on tablet, which is no longer the default for iPads, iPads default to the desktop view and therefore they don’t load mobile stylesheets. is this an Android tablet?

3 Likes
3

Yes, that’s an Android tablet.

2 Likes
4

I’m tempted to say that defaulting to a mobile user agent is the wrong choice for a browser in landscape on tablet (even in portrait tbh). Not sure if this is Chrome or another browser, Chrome in some cases defaults to desktop mode: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 Like
5

I can reproduce this on both the ipad and the android tablet, although it is worse on android thanks to the aspect ratio:

The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)
The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)1920×1200 208 KB

Edit: This issue actually does not happen on iPad, I tried and it looks fine

2 Likes
6

One aspect I do like about the mobile setup is that the sidebar menu slides in as an overlay and not embedded on the page. It feels more “native” on a mobile device to me.

How about just adding a breakpoint declaration?

@include breakpoint(mobile-extra-large) {
  #main-outlet-wrapper {
    margin-left: unset;
    margin-right: unset;
  }
}

So on narrow mobile devices the potential extra space is removed, but wider devices would have the wrapper centered.

3 Likes
7

The breakpoint(mobile-extra-large) option makes sense to me. Curious also what @awesomerobot thinks here.

2 Likes
8

I tried with a handful of very custom themes and I don’t think we need it at all anymore… a few months after it was added the wrapper was set to grid with width: 100%;, so in theory that should prevent the original issue from happening at all

removing it here

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

Thanks for investigating!

5 Likes