fix(css): Support arbitrary widths on dropdown
Fix for #750 (closed)
Truncate text with ellipsis and prevent caret from shrinking when dropdowns have a set width. Icons buttons now have a set min-width so they don't shrink until they can't be seen.
Changes
Caret is shifted right
Carets is moved right by applying mr-auto (margin right: auto;) to the text.
| before | after |
|---|---|
 |
 |
Note: Using ml-auto on the caret was not a good solution because it already defines has a margin-left for spacing/layout.
Dropdown text is truncated
| before | after |
|---|---|
 |
 |
Icons (caret) in buttons have a min-width
In dropdowns and buttons, icons (including the dropdown caret) now have a set min-width so they don't shrink when space is small:
| before (120px) | after (160px) |
|---|---|
 |
 |
 |
 |
Note: buttons are also changed, I think this is an improvement over the current state, but possibly buttons' text should be truncated as well. If this change is not desirable, the min-width can be set exclusively on the dropdown caret.
| before | after |
|---|---|
 |
 |