Create contact releationship form has optional "I know the name" text boxes for that appear out of order

[eoinobrien]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github (I've searched it).
• I agree to follow Monica's Code of Conduct.

Bug description

Create contact releationship form has optional "I know the name" text boxes for that appear out of order

Steps to reproduce

Default empty UI:

Selecting "I know the name", adds the Name text box and the pills to add some additional fields are directly below the text box, while "+ gender" and "+ pronoun" are below "choose an existing contact"

Selecting "+ last name" and "+ nickname", shows another discrpency. Last name appears just below the name text box, while the nickname text box appears above the "+ gender" and "+ pronoun" pills.

Selecting all the pills, shows all additional text boxes bar last name appearing below the "Choose an existing contact".

Expected behavior

For all the pills and the relevant textboxes to appear under the "I know the name" section.

Environment

beta.monicahq.com (v5 a.k.a chandler version or main branch)

Version of Monica

Version v5.0.0-beta.3 — commit 2f5225b.

Installation method

None

Web server

None

Database engine version

None

Additional info

No response

[eoinobrien]

@djaiss pining you as the contribution guide say I should talk to you before any UI changes.

I have been looking at the create relationship dialog, and this bug along with #7227 and #7226 were something I was planning to create.

My plan was to rearrange things so that the pills were in a single location:

And that all the text boxes appeared in a single location under "I know the name"

Is this something that makes sense?

I've been pulling together fixes for the 3 bugs here: https://github.com/eoinobrien/monica/tree/eoinobrien/fix-contact-create-relationship-form, but will hold off on creating a PR until I hear from you.