fix: drop down gap

[kwongz]

Description

Checklist

• [ x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [ x] I have added a changeset
• I have added to the docs where applicable
• I have added to the VS Code extension where applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: adf8b4c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@evidence-dev/components	Patch
@evidence-dev/core-components	Minor
@evidence-dev/evidence	Major
my-evidence-project	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	adf8b4c
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/6647a79586c14f0008eb6c60
😎 Deploy Preview	https://deploy-preview-2007--next-docs-evidence.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	adf8b4c
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/6647a795ea0f660008be64b2
😎 Deploy Preview	https://deploy-preview-2007--evidence-test-env.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	adf8b4c
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/6647a795be70b20008fd9377
😎 Deploy Preview	https://deploy-preview-2007--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mcrascal]

@kwongz hitting the ground running, nice!

A couple things I noticed:

1. Dropdown items can wrap to multiple lines. Right now, a dropdown with a wrapping item ends up a little cut off.
2. Check the behaviour when searching, see gif. Ideally, all results would be visible, up to a height maximum, but right now the menu is shrinking below the size of the list.

@ItsMeBrianD feel free to weigh in also, but would it make sense to have the behaviour be something more like:

1. More than [5] list items: we render the virtual list, and it has the same fixed height always.
2. Less than [5] list items: we render a div, and we just let it fit its contents (e.g. no fixed height)?

I think that would cover the multi-line and search scenarios while also removing the gap.

[mcrascal]

See comment

[kwongz]

Thanks @mcrascal! Sound good, get working on this!

[kwongz]

Added conditional rendering in the Dropdown.svelte file, Renders scroll-able Virtual List with 5 or more options

Dropdowns with less then 5 options will render DropdownOptionDisplay component with a regular div container to manage the height of the contents

Example 1. - 4 options with Line breaking

Example 2. - 2 options

[mcrascal]

I believe this should be gitignored

[kwongz]

Thanks! Added the hashes.json to the gitignore, not too sure how it ended up there will speak to Brian about it tomorrow

[mcrascal]

Very excellent. No notes. One note.

[mcrascal]

@kwongz Massive!