# Login / Signup modal alignment issue

**URL:** https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046
**Category:** UX
**Tags:** completed
**Created:** [November 20, 2023, 7:45am UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046 "2023-11-20T07:45:21Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 20, 2023, 7:45am UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/1 "2023-11-20T07:45:21Z")

</div>

Hello 👋

The login and signup modal seems a little misaligned.

I think this commit is related.

[https://github.com/discourse/discourse/commit/f72899401d3ab8acec7054ba43b2780cbc843b77](https://github.com/discourse/discourse/commit/f72899401d3ab8acec7054ba43b2780cbc843b77)

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

 ![Screenshot_20231120_084033_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/c/8/6/c86f9f0fe33409e7f24d9873925d107762cacbd2.jpeg)  
 ![Screenshot_20231120_084040_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/4/a/7/4a78c6c14098bde258c533d3637671409f25f50a.jpeg)

On Desktop

 ![Screenshot 2023-11-20 at 8.52.10](https://global.discourse-cdn.com/meta/original/4X/8/f/d/8fd662410f364ac6399e6c1b9bce9b5f3ec9c79c.png)

Changing to mobile view on desktop

 ![Screenshot 2023-11-20 at 8.52.31](https://global.discourse-cdn.com/meta/original/4X/4/0/7/407a873572ee46596b9a1f6f68b5f2df9a794379.png)

 ![Screenshot 2023-11-20 at 8.52.52](https://global.discourse-cdn.com/meta/original/4X/b/9/8/b98bdae8873c508b8f9ed7810fdf9f4cbf2f044a.png)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 20, 2023, 8:39am UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/3 "2023-11-20T08:39:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 20, 2023, 10:37am UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/5 "2023-11-20T10:37:06Z")

</div>

[PR](https://github.com/discourse/discourse/pull/24457) incoming to fix:

> [@Don](#):
>
> To better see the issue I changed it to other (Hungarian) language where the texts longer.
> 
> ![Screenshot_20231120_084033_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/c/8/6/c86f9f0fe33409e7f24d9873925d107762cacbd2.jpeg)

=\> these should now be full-width if needed

> [@Don](#):
>
> ![Screenshot_20231120_084040_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/4/a/7/4a78c6c14098bde258c533d3637671409f25f50a.jpeg)
> 
> Screenshot\_20231120\_084040\_com.android.chrome1080×2240 210 KB

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

> [@Don](#):
>
> On Desktop
> 
> ![Screenshot 2023-11-20 at 8.52.10](https://global.discourse-cdn.com/meta/original/4X/8/f/d/8fd662410f364ac6399e6c1b9bce9b5f3ec9c79c.png)

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

> [@Don](#):
>
> Changing to mobile view on desktop

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 20, 2023, 12:42pm UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/6 "2023-11-20T12:42:56Z")

</div>

Thanks for the fix 👍

> [@chapoi](#):
>
> Mobile view isn’t expected to work nicely on desktop size screens, so not sure what the issue is here?

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)

 ![Screenshot 2023-11-20 at 13.04.55](https://global.discourse-cdn.com/meta/original/4X/9/d/c/9dc13eff2da7f5bf9a8fb42bd69996c0086713b8.png)

Mobile (desktop-view)

 ![Screenshot_20231120_124944_com.android.chrome](https://global.discourse-cdn.com/meta/original/4X/a/f/f/aff47311b84cf3c46d0f5178112e4d31e3d96dd1.jpeg)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 20, 2023, 12:44pm UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/7 "2023-11-20T12:44:40Z")

</div>

> [@Don](#):
>
> f we switch to mobile view then we should see almost the same like on a mobile device without simulate it on virtual device.

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.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [November 20, 2023, 12:52pm UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/8 "2023-11-20T12:52:04Z")

</div>

> [@chapoi](#):
>
> Did you append `?mobile_view=1` to the url?

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`.

 ![Screenshot 2023-11-20 at 13.50.19](https://global.discourse-cdn.com/meta/original/4X/8/3/0/83099c81f4061ecb157ca3c04cbef793ced13c63.png)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 20, 2023, 12:59pm UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/9 "2023-11-20T12:59:29Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 25, 2023, 1:00am UTC](https://meta.discourse.org/t/login-signup-modal-alignment-issue/286046/10 "2023-11-25T01:00:39Z")

</div>

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