[Bug]: Hard-coded min-width on <Select>

[t3rminus]

Tremor Version

3.13.4

Link to minimal reproduction

N/A

Steps to reproduce

Create a Select component, and place in a container with the width narrower than 10rem

What is expected?

The Select component shrinks to fit the container

What is actually happening?

The Select component overflows the container, due to min-w-[10rem] on the container elements.

What browsers are you seeing the problem on?

No response

Any additional comments?

This worked as expected in 3.11.1, but broke when I updated my project to 3.13.4.

Tremor is so full of hard-coded styles, and assumptions on how components will be used. It's ultimately still faster to build our project using it, but it's incredibly frustrating to run into these situations where a container has hard-coded styles, and there's no way to override them.

Do not assume to know how a component is being used. In absence of a date/time picker component (or documentation on it), I ended up writing my own wrapper, which uses Selects for the hour & minute. They do not need to be 10rem wide, since they're picking from (at most) two characters.

[ryuji-1to]

have the same problem

[ErtyumPX]

Assuming that minimum width was hard-coded for styling purposes, I appreciate the tremorlabs' open source components, however:

Having the same issue, it's not ideal to have the minimum width hard coded in every input component, not only in Select, it is also the same in the BaseInput component which other inputs inherit. Would very much appreciate if there was an easy work-around at least.

It killed my day while working on a registration window, and wanted to have a Single Selection for country code for phone number, it does not really have to take 10rem of width when the maximum length is 3

[github-actions]

🎉 This issue has been resolved in version 3.17.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀