Hallo,
Ich weiß nicht, ob das normal ist, aber hier ist ein Screenshot:
Der Inhalt überschreitet die Seitenbreite, wodurch Texte abgeschnitten werden und ein horizontaler Scrollbalken erscheint. Die verschiedenen Blöcke passen sich nicht richtig an den verfügbaren Platz an.
Ist das normal oder ein kleines Bug?
Danke
Hallo zusammen!
Dieses Thema ist nun in Entwicklung .
Ein Pull Request wurde eröffnet, um das horizontale Überlaufen von zu langen Textwerten in den Dashboard-Widgets zu beheben:
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)_
## Summary by CodeRabbit
- **Bug Fixes**
- Long text values in glass-themed device widgets now wrap within the card instead of extending beyond it.
- Prevented horizontal scrolling caused by lengthy, unbroken text.
- Text values remain right-aligned while displaying across multiple lines.
Zögert nicht, dem PR zu folgen, es zu testen (optional, vor allem bei kleinen Anfragen) und euer Feedback hier zu hinterlassen, falls nötig.
