fix(ui): force line break for long node names in Set route dialog

[Copilot]

Long node names in the "Set route" dialog cause horizontal overflow with a scrollbar instead of wrapping to the next line.

Changes

• Add scoped CSS to ListInput.vue to force text wrapping on .v-list-item elements

.v-list-item {
	overflow-wrap: break-word;
	word-break: break-word;
}

Before

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>When setting priority route or return routes, the node name and node area can become too long and a scroll bar appears.</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.11.0

ZwaveJS version

15.20.1

Describe the bug

When setting priority route or return routes, the node name and node area can become too long and a scroll bar appears. I think a possible solution is to not show the area if the node name is longer than so many characters.

To Reproduce

GIF above shows the strange behavior. When setting priority route or return routes, the node name and node area can become too long and a scroll bar appears. I think a possible solution is to not show the area if the node name is longer than so many characters.

Expected behavior

I think a possible solution is to not show the area if the node name is longer than so many characters.

Additional context

Issue spawned from discord conversation here https://discord.com/channels/1111193770935996459/1143928447790502061/1479094432396476426</issue_description>

<agent_instructions>In set route dialog, the repeaters list could horizontally overflow the view, fix it by breaking the line instead </agent_instructions>

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

@robertsLando @bharvey88 thanks for your issue, by the way I don't see this a real issue, I mean you have a very long name that is not very usual and showing the scrollbar just allows you to see it fully in case you need. I could make that dialog a bit larget if you want or show a tooltip instead @AlCalzone @robertsLando can't we just force a line break instead of letting the container scroll? @robertsLando That could be an alternative 🙏🏼

• Fixes When setting priority route or return routes, the node name and node area can become too long and a scroll bar appears. #4577

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[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.

[AlCalzone]

I'm not sure if this is an overly broad fix?

[robertsLando]

I need to check this out my own as usually when dealing with vuetyify components and scoped css you have to use deep keyword in css

[robertsLando]

I spent some hours on this without success. Sincerly I would like to focus on more important things 😆