[openstreetmap/openstreetmap-website] Re-arrange login and signup screens as discussed in #4128 (PR #4455)

[Tobias]

Some testing on https://signup.apis.dev.openstreetmap.org/login

* It needs some space at <img width="688" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/1bfa36f1-c12b-4e52-8947-84dae425e5fb"> (it does have the space on the sign up view)
* FYI, this is the wording on the German UI ATM. Some text are longer, which is OK, just good to see that it is working <img width="681" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/5891d212-4528-4b50-b275-69dad1d1550b">
* The new forgot-passwort-field looks non-ideal on mobile <img width="243" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/cb7fbdb6-5fb6-43c5-a8d0-463f319b48b7"> (that can be fixed later, of course…) —changing from `col-sm` to just `col` solved it in the inspector: <img width="784" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/8306bac5-c776-4f7d-95c4-eeaf0d68f565">



**Column spacing on mobile:**

I think the padding-x inside the box is a bit too wide on mobile (tested with iPhone 12 Pro Size in Chrome Devtools). I don't know a lot about Bootstrap anymore, but adding `px-4  px-sm-5` to the `col-sm` helps. It does make the sm+ case a bit bigger, but that is OK IMO. Someone who knows more about bootstrap might know how to overwrite just the mobile case…

| before | after |
|--------|--------|
| <img width="382" alt="mobile-before" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/bf3a1d0a-7146-45e7-908e-ef9a575dd9fc"> | <img width="379" alt="mobile-after" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/00ad864f-0f36-46db-a6c0-b0e97633421f"> |
| <img width="611" alt="Bildschirmfoto 2024-01-27 um 07 48 40" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/68452d39-cadc-4b19-b051-fef206cc3c90"> | <img width="611" alt="desktop-after" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/a0b09347-23f4-4722-bdf1-5214834df1fa"> |


---

Just double checking: We cannot trigger the UI that is used for the app-permissions-flow on that server, right? (Just showing it, I don't want to submit…)

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4455#issuecomment-1913043657
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4455/c1913043657 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240126/2183bd1e/attachment.htm>