[BUG] Icon dropdown shifts layout when suggestions are shown

[ChinmayMhatre]

Has this bug been raised before?

• I have checked "open" AND "closed" issues and this is not a duplicate

Where did you find this bug?

production

Version of BioDrop (for example "v1.2.3")

Current

Description

Edit by Sara Jaoude:

In the Management pages there is a layout shift when we start typing in the icon input in:

• add & edit links
• add & edit milestones

Ideally the suggestion should be floating but in this case they shift the layout like a block element.

I went through the code and saw the element is coming from headless ui ComboBox. I don't know if this can be don't but wanted other's opinion

Screenshots

No response

Do you want to work on this issue?

No

If you want to work on this issue...

No response

[github-actions]

To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[SaraJaoude]

Thanks for raising. I will add the discussion label so that we can see what solutions the community comes up with.

[Kamaruddheen]

We should position that suggestions dropdown/list absolutely so it floats overtop of everything and add higher z-index. That way it won't affect the layout when it appears and disappears.

Extra: May be we should add some sliding up/down animation to make it look smooth.

[Abhishek-90]

I tried something using the developers tool to see how it would look, here is a screenshot.

[Kamaruddheen]

I tried something using the developers tool to see how it would look, here is a screenshot.

Could you please provide a short video or GIF that shows the behavior when we type text?

[Abhishek-90]

Here you go @Kamaruddheen.

Manage.Links.-.Google.Chrome.2023-11-24.17-16-18.mp4

[Kamaruddheen]

Looks good @Abhishek-90. Let the maintainer's decide whether to proceed with solution.

ℹ️ Kamaruddheen has some opened assigned issues: 🔧View assigned issues

[eddiejaoude]

I agree lets go ahead with this solution 👍 @Abhishek-90 I have assigned it to you

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

[Abhishek-90]

Hi, can we also add status:ready for dev label as well as the points for it.

ℹ️ Abhishek-90 has some opened assigned issues: 🔧View assigned issues

[eddiejaoude]

Hi, can we also add status:ready for dev label as well as the points for it.

Oh yes, sorry, I will do that now

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md