Fix dropdown login padding

[MichaelBuessemeyer]

This PR adds a margin between the forgot password and Register Now in the login dropdown and thus ensures some space between them. I also made the position of the dropdown fixed so that it does not scroll away anymore.

URL of deployed dev instance (used for testing):

• https://fixdropdownloginissue.webknossos.xyz

Steps to test:

• logout and open the dropdown. Resize the window and try to get the two options forgot password and Register Now together. There should be at least some space between them.
• Testing that the dropdown does not scroll away: add some margin-bottom to the main container so that it becomes scrollable :)

Issues:

• fixes Login dropdown layout issue #3956

---

• [ ] Updated changelog
• [ ] Updated migration guide if applicable
• [ ] Updated documentation if applicable
• [ ] Adapted wk-connect if datastore API changes
• [ ] Needs datastore update after deployment
• Ready for review

[philippotto]

Thanks for doing this and also for implementing the fixed fix :)

I noticed, that it can happen that the links are not next to each other when resizing the window. You can enforce the correct layout, by using a flexbox. The markdown should look something like this:

// warning: this is not jsx but html
<div style="display: flex;">
  <a href="/auth/register" style="margin-right: 10px; flex-grow: 1;">Register Now</a>
  <a href="/auth/resetPassword">Forgot Password</a>
</span>

[MichaelBuessemeyer]

@philippotto nice notice 👍 , but the changes you suggested do not fix this problem for me. But let's talk about this together 🙂

[MichaelBuessemeyer]

@philippotto I updated the dev instance with your suggested changes. They seem to work but I think the solution is not ideal, as the links now get displayed like a table 😕

[philippotto]

@philippotto I updated the dev instance with your suggested changes. They seem to work but I think the solution is not ideal, as the links now get displayed like a table

Thank you! I just added white-space: nowrap; to the two a elements. Let's hope, this works :)

[MichaelBuessemeyer]

@philippotto I updated the dev instance and your fix works perfectly 👍

[philippotto]

🎉