Login / Signup modal alignment issue

AI-generated summary

A user reported a misalignment issue with the login/signup modal, particularly when using longer text in non-English languages like Hungarian. The issue was linked to a recent commit and demonstrated across desktop and mobile views, with overflow and layout problems. chapoi acknowledged the issue and provided a PR to fix it, addressing full-width text, hiding blue areas on mobile, and enabling scrolling within the modal. Don appreciated the fix but raised concerns about mobile view behavior on desktop, noting inconsistencies when using ?mobile_view=1 versus device emulation. chapoi clarified that the issue is not expected to work perfectly on desktop and suggested opening a new topic for further discussion.

Hello :waving_hand:

The login and signup modal seems a little misaligned.

I think this commit is related.

https://github.com/discourse/discourse/commit/f72899401d3ab8acec7054ba43b2780cbc843b77

To better see the issue I changed it to other (Hungarian) language where the texts longer.


On Desktop

Changing to mobile view on desktop

4 Likes

Thanks for the report, most likely related indeed. I’ll take a look!

4 Likes

PR incoming to fix:

=> these should now be full-width if needed

=> The blue area should be hidden on mobile, as it was the case before the refactor

Overflow should scroll now in the modal instead of exceed the modal size

Mobile view isn’t expected to work nicely on desktop size screens, so not sure what the issue is here?

3 Likes

Thanks for the fix :+1:

I am not sure why is not expected to work nicely on desktop (mobile-view) and mobile (desktop-view). This is a little bit edge case I know, but on desktop (mobile-view) would be nice if for no other reason, but at least for dev purpose. If we switch to mobile view then we should see almost the same like on a mobile device without simulate it on virtual device.

On the mobile (desktop-view) now overflows the modal content. This is also an edge case but sometimes Discourse detects wrongly the mobile devices browser so it drop them to desktop-view.

Desktop (mobile-view)

Mobile (desktop-view)

1 Like

Did you append ?mobile_view=1 to the url? I see what you’re seeing if I don’t do that, but if I do, it works as expected.

Yes with ?mobile_view=1 it looks as I shared above.

If I use the chrome device toolbar and reload the site it will use the correct mobile view because it will detect the device as mobile-device.

1 Like

Okay I see what you mean.

I have no immediate answer or solution for it unfortunately. And since this is something that transcends this particular topic, I’d recommend opening a dedicated topic if you feel strongly about it.

Thanks!

This topic was automatically closed after 4 days. New replies are no longer allowed.