Hola,
No sé si es normal, pero aquí tienes una captura:
El contenido excede el ancho de la página, lo que provoca el corte de textos y la aparición de una barra de desplazamiento horizontal. Los diferentes bloques no se adaptan correctamente al espacio disponible.
¿Es normal o es un pequeño error?
Gracias
¡Hola a todos!
Este tema ahora está en desarrollo .
Se ha abierto una PR para corregir el desbordamiento horizontal de los valores de texto demasiado largos en los widgets del panel de control:
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.
No duden en seguir la PR, probar (opcional, especialmente para pequeñas solicitudes) y dar sus comentarios aquí si es necesario.
