fix(ui): hide units suffix on small displays to prevent spinner/units overlap

[Copilot]

In ValueId.vue, when a v-combobox with type="number" displays a unit suffix (e.g., "seconds"), the browser's native spinner arrows can overlap with the unit text on narrow viewports.

Changes

• Added comboboxSuffix computed property that hides the suffix when type === 'number' and $vuetify.display.smAndDown (< 960px)
• Added selectSuffix computed property for v-select consistency on small displays

comboboxSuffix() {
  if (
    this.modelValue.type === 'number' &&
    this.modelValue.unit &&
    this.$vuetify.display.smAndDown
  ) {
    return undefined
  }
  return this.modelValue.unit
}

Uses Vuetify's responsive breakpoint system already in use for max-width styling in the same component.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• 224.0.0.251
  • Triggering command: REDACTED, pid is -1 (packet block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Overlap Between Spinner and Units in Columns View</issue_title>
<issue_description>### Checklist

• I am not using Home Assistant. Or: a developer has told me to come here.
• I have checked the troubleshooting section and my problem is not described there.
• I have read the changelog and my problem is not mentioned there.

Deploy method

Home Assistant Add-on

Z-Wave JS UI version

11.8.2

ZwaveJS version

15.7.1

Describe the bug

Depending on the width of the page and the size of the text in the option and unit fields, the units can sometimes overlap with the spinner.

To Reproduce

Find a device that has a spinner with some options defined with text and a unit such as seconds, then resize the browser until they overlap.

Expected behavior

Presumably the overlap should not occur, though how it should be handled is likely up for debate.

Additional context

In this screen snip from a VZW31-SN, my browser is at its typical size and the home assistant menu is expanded (by default). You can see "seconds" overlap with the toggle:

In this screen snip of the same parameters, the only difference is that I collapsed the HA menu (expanding the browser to full screen instead has an even more profound result). You can see the overlap is no longer present:

</issue_description>

<agent_instructions>when ValueID.vue is showing a combobx of type number with also a label it could happen that the arrow buttons to increese/decreese the value overlap with the units label. We should detect when this happens and consider hiding the units in case</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@robertsLando @The00Dustin thanks for your issue, unfortunately I don't have a fix for this, I accept suggestions @robertsLando those are all applicable solutions but require some patching on the components that IMO are not very clean and may still result in something not so good to read... I could also suggest to reduce browser zoom if that's an issue?

• Fixes Overlap Between Spinner and Units in Columns View #4495

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[zwave-js-assistant]

💡 The pull request title does not match our guidelines 💡

We follow conventional commits, check out the description and examples. This means that the PR title must...

• start with the type of change, e.g. feat:, or fix:
• optionally specify a scope, for example we use config for changes to config files: feat(config):
• contain a description that explains what is being changed, e.g. add a parameter, correct a typo, ...
• and ideally explains what the change affects, e.g. the device (manufacturer, device label, firmware, ...)

The description should use uppercase and lowercase normally, except for the first character which must be lowercase.

[robertsLando]

@The00Dustin Could this be a nice tradeoff? Hiding suffix on smaller screens

[The00Dustin]

Well, in the case above, the display isn't exactly small, it's just that the text is long. Also, the same units display fine on parameter 19 even though they don't display fine on parameter 17. It might make more sense to standardize abbreviations such that the units here would be secs instead of seconds. For small displays, there is already the compact display default which I just checked on my phone and it looks fine there only because there is no spinner 🤦 .