[Bug]: MultiSelect drop down cut off in Dialog

[jschuur]

Tremor Version

3.14.1

Link to minimal reproduction

n/a

Steps to reproduce

Nest a MultiSelect inside a DialogPanel and when the drop down menu opens up, it gets cut off at the end of the dialog box, if it's a small enough dialog box.

What is expected?

Dropdown menu should be fully visible.

What is actually happening?

Dropdown menu is cut off at the bottom.

What browsers are you seeing the problem on?

Chrome

Any additional comments?

I've solved this for now, by explicitly removing the overflow-hidden in the .tremor-dialog-panel div, by adding this to globals.css:

.tremor-dialog-panel {
  overflow: visible !important
}

Edit: You can also just add overflow-visible to the DialogPanel.

[rlancejohnson]

This is happening for all versions of the select components and the date picker component with cards and modals for us.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.15.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 3.16.0-beta.2 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: