zwave-js / zwave-js-ui / 39557647520

17%

push

github

fix(ui): wrap long option labels in value dropdowns (#4870)

## Problem

Long option labels in value dropdowns (for example config parameters
with long state names) get cut off with an ellipsis, and there is no way
to read the full text. This still happens on Vuetify 3:
`.v-list-item-title` uses `white-space: nowrap` and `text-overflow:
ellipsis`. When the menu can't grow to fit the label (narrow screen, or
a label longer than the free space), the option is truncated.

## Fix

In `ValueId.vue`, both the `v-select` and the `v-combobox` now pass
`:list-props="{ class: 'valueid-list' }"`. A non-scoped style lets
`.valueid-list .v-list-item-title` wrap (`white-space: normal`). The
style can't be scoped because the menu is teleported outside the
component.

I used `list-props` rather than `menu-props.contentClass`. Setting
`contentClass` would replace Vuetify's own `v-select__content` /
`v-combobox__content` class, and the menu would lose its shadow and
border radius. `list-props` adds our class to the list and keeps
Vuetify's classes. The selected-value display isn't changed.

## Testing

- Mounted `ValueId` with three states (one short, two long) in a
temporary page and opened both dropdowns in headless Chrome at 380px
width.
- Before: the long options were `nowrap` and truncated (`scrollWidth >
clientWidth`).
- After: they wrap onto 2-3 lines and are fully readable. The menu keeps
its shadow.
- At desktop width the menu still grows to fit the labels as before.
- `npm run lint` passes.

Closes #1919

671 of 4570 branches covered (14.68%)

Branch coverage included in aggregate %.

1178 of 7055 relevant lines covered (16.7%)

2.84 hits per line