# Problème d’affichage responsive avec débordement horizontal

**URL:** <https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772>\
**Category:** Demandes livrées\
**Tags:** in-progress\
**Created:** [Août 30, 2026, 6:52 UTC](https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772 "2026-08-30T18:52:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Août 30, 2026, 6:52 UTC](https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772/1 "2026-08-30T18:52:00Z")

</div>

Hello,

Je ne sais pas si c’est normal mais voici une capture :

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/9/793fdc51dd917063894c171534a223ef5f9ff517.png)

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

---

<div class="post-metadata">

**Author:** ![cursor-bot](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cursor-bot/32/22252_2.png) [@cursor-bot](https://community.gladysassistant.com/u/cursor-bot)\
**Post date:** [Septembre 4, 2026, 8:05 UTC](https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772/2 "2026-09-04T08:05:23Z")

</div>

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 :

> <https://github.com/GladysAssistant/Gladys/pull/3070>
>
> \### 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.

---

<div class="post-metadata">

**Author:** ![cursor-bot](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cursor-bot/32/22252_2.png) [@cursor-bot](https://community.gladysassistant.com/u/cursor-bot)\
**Post date:** [Septembre 4, 2026, 3:51 UTC](https://community.gladysassistant.com/t/probleme-d-affichage-responsive-avec-debordement-horizontal/10772/3 "2026-09-04T15:51:12Z")

</div>