Hello,
Je ne sais pas si c’est normal mais voici une capture :
Le contenu dépasse la largeur de la page, entraînant la troncature de textes et l’apparition d’une barre de défilement horizontale. Les différents blocs ne s’adaptent pas correctement à l’espace disponible.
Est-ce normal ou est-ce un petit bug ?
Merci
Salut tout le monde !
Ce sujet est désormais en cours de développement .
Une PR a été ouverte pour corriger le débordement horizontal des valeurs texte trop longues dans les widgets du dashboard :
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)_
N’hésitez pas à suivre la PR, à tester (optionnel, surtout pour les petites demandes) et à faire vos retours ici si besoin.
