Hello,
I don’t know if this is normal, but here’s a screenshot:
The content exceeds the page width, causing text truncation and a horizontal scrollbar to appear. The different blocks don’t adapt correctly to the available space.
Is this normal or is it a small bug?
Thanks
Hi everyone!
This topic is now in development .
A PR has been opened to fix the horizontal overflow of long text values in the dashboard widgets:
master ← claude/responsive-display-issue-b0fohz
ouvert 08:04AM - 04 Sep 26 UTC
### Description
A community member reported that a devices-in-room widget overf… lowed its card horizontally: the text was truncated and a horizontal scrollbar appeared under the rows (screenshot in the forum topic: a "Conseil de protection solaire" text feature whose value is a full sentence).
**Cause.** In the glass theme, the control cell of every widget row (`td:last-child` of `.device-widget-table`) is `white-space: nowrap` on purpose: switches, steppers and button groups keep their designed width whatever the device name's length. A text feature (`TextDeviceValue`) goes through the same cell, so a long sentence became one unbreakable line that pushed the pill past the card. The `.table-responsive` wrapper then showed the horizontal scrollbar seen in the report.
**Fix.**
- `TextDeviceValue` now tags its wrapper with a `text-device-value` class.
- `routes/dashboard/style.css` makes that class the second exception to the nowrap rule (next to the existing `no-recent-value-badge` one): the value wraps on several right-aligned lines like the name next to it, with `overflow-wrap: anywhere` so a single long token (URL, serial number) breaks too. Every other control keeps its nowrap.
Reproduced and verified in demo mode with a long text feature added to the garden card, at 412px (phone) and in a narrow desktop column. Before: `scrollWidth` of the wrapper was 719px for a 386px card. After: no overflow, the sentence wraps inside the pill.
| Before | After |
| --- | --- |
| value on one line, card scrolls horizontally | value wrapped on 4 right-aligned lines, no scrollbar |
## Forum
Forum: https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772
### Checklist
- [x] Tests pass: server code untouched; UI change verified in demo mode with a headless browser (Cypress binary could not be downloaded in this environment)
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`) — run on the changed front files
- [x] No undocumented breaking change
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_018BEArtKpuA928AwjZ5ugqH
---
_Generated by [Claude Code](https://claude.ai/code/session_018BEArtKpuA928AwjZ5ugqH)_
Feel free to follow the PR, test (optional, especially for small requests) and give your feedback here if needed.
