Summary
The Very Generic Indicator's name label is hard-clipped rather than ellipsized, so a name that is only slightly too long loses its last characters with nothing to signal it. Celsius 2 Temp renders as Celsius 2 Te, and Water Temp [2] renders as Water Temp , which is indistinguishable from the Bar30's Water Temp preset.
Cause
In src/components/mini-widgets/VeryGenericIndicator.vue, the text block is absolute left-[3rem] ... w-full: it is as wide as the whole widget but starts 48px into it, so it hangs 48px past the right edge and is cut by the container's overflow: hidden at widgetWidth - 4. text-ellipsis is set on the name span, but it only triggers once the text exceeds the span's own box, which is the full 136px — and by then the text has already been clipped by the container at 84px.
So for the default 136px indicator, any name between 84px and 136px wide is silently truncated with no ellipsis at all. Measured at the real font (14px, weight 600):
| Label |
Width |
Renders as |
Water Temp |
82.6px |
fits, 1.4px spare |
Tether Turns |
87.6px |
clipped |
Celsius 2 Temp |
104.7px |
Celsius 2 Te |
Water Temp [2] |
106.8px |
Water Temp |
Tether Turns is a stock preset, so this is already visible in a default profile, not only with custom names.
Suggested direction
Give the text block a width that matches the space it actually occupies (calc(100% - 3rem) rather than w-full) so the ellipsis triggers at the same point the clipping does. Worth checking the value line and the scrolling-overflow animation at the same time, since both share that block.
Found while adding a preset in #2924, which works around it by keeping the new preset's name short.
Summary
The Very Generic Indicator's name label is hard-clipped rather than ellipsized, so a name that is only slightly too long loses its last characters with nothing to signal it.
Celsius 2 Temprenders asCelsius 2 Te, andWater Temp [2]renders asWater Temp, which is indistinguishable from the Bar30'sWater Temppreset.Cause
In
src/components/mini-widgets/VeryGenericIndicator.vue, the text block isabsolute left-[3rem] ... w-full: it is as wide as the whole widget but starts 48px into it, so it hangs 48px past the right edge and is cut by the container'soverflow: hiddenatwidgetWidth - 4.text-ellipsisis set on the name span, but it only triggers once the text exceeds the span's own box, which is the full 136px — and by then the text has already been clipped by the container at 84px.So for the default 136px indicator, any name between 84px and 136px wide is silently truncated with no ellipsis at all. Measured at the real font (14px, weight 600):
Water TempTether TurnsCelsius 2 TempCelsius 2 TeWater Temp [2]Water TempTether Turnsis a stock preset, so this is already visible in a default profile, not only with custom names.Suggested direction
Give the text block a width that matches the space it actually occupies (
calc(100% - 3rem)rather thanw-full) so the ellipsis triggers at the same point the clipping does. Worth checking the value line and the scrolling-overflow animation at the same time, since both share that block.Found while adding a preset in #2924, which works around it by keeping the new preset's name short.