feat(BB-432): Show possible duplicates next to the name section

[the-good-boy]

This PR addresses ticket BB-432. The suggestions no longer appear just below the name field.
This is how it looks like when there are more than 5 suggestions:

The list of results is scrollable, so its height does not go over what is show in the screenshot above

This is how it looks like when there is an exact match:

[MonkeyDo]

So far so good :)
It is a bit disturbing to see the inputs on the left like that when there is nothing to the right, but perhaps it is only because I am used to the current placement.

Two things are sure:

1. It's better than the current solution
2. it's better to have the inputs on the left all the time than to change the layout automatically (for example having input in the middle, but move them to the left if we need to show the duplicates to the right).

Out of curiosity, did you try with a popup sort of functionality?
I made a quick and dirty mockup based on the tooltips we have on the input labels [the (?) icons], I think it's a solution that could work, although I'm not sure how we would handle the placement.
Worse comes to worse we can always roll out some custom CSS, which I can help with.

[the-good-boy]

About the popup functionality, can you tell me a little more. Do we want there to be a button/icon which gives us an alert that there are possible duplicates and clicking that button displays that popup on the side? Or is it something which automatically pops up whenever we have suggestions?

[the-good-boy]

I just realized that there are some more mistakes here. When we view on smaller screens, the suggestions columns bleeds outside the entity-editor like this:

Putting a margin-left-1 on the outer div kind of fixes that, but then the entire name-section gets a margin left, and stands out if one looks closely

[MonkeyDo]

About the popup functionality, can you tell me a little more. Do we want there to be a button/icon which gives us an alert that there are possible duplicates and clicking that button displays that popup on the side? Or is it something which automatically pops up whenever we have suggestions?

It turns out I don't have a great solution for this, so let's go with what you currently have :)

[MonkeyDo]

Last little bit and this will be ready to merge, thanks :)

[MonkeyDo]

Took me a little while to find the issue you mentioned with the weird margins on smaller screens:

The way these are used is that Row elements contain Col elements instead of the other way around.

The .row class has negative left and right margins which explains what we are seeing when collapsed;

I think the simple solution here is to replace these <Row> elements here with <div>s

[the-good-boy]

Hey @MonkeyDo do you think that perhaps we can further improve this by removing the "Show More" button and instead using a fixed-size scrollable list (something like this). That way we don't get all that whitespace on the left when we expand the list. I haven't tried this yet, its just something I was considering.

[MonkeyDo]

Hey @MonkeyDo do you think that perhaps we can further improve this by removing the "Show More" button and instead using a fixed-size scrollable list (something like this). That way we don't get all that whitespace on the left when we expand the list. I haven't tried this yet, its just something I was considering.

That's a great idea, I love it.
It will certainly improve the view.

P.S: I took the liberty of fixing a merge conflict, since I knew which bit had changed. Sorry it's taking so much time for me to get to these PRs that they accumulate merge conflicts 😓