# Pb sur affichage "changement d'état de l'appareil"

**URL:** <https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590>\
**Category:** Demandes livrées\
**Tags:** in-progress\
**Created:** [Août 15, 2026, 5:13 UTC](https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590 "2026-08-15T17:13:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 15, 2026, 5:13 UTC](https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590/1 "2026-08-15T17:13:09Z")

</div>

le texte «&nbsp;mouvement détecté&nbsp;» et «&nbsp;pas de mouvement&nbsp;» ne tienne pas dans les boutons

 ![Capture d'écran 2026-08-14 184201](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/6/3/6370a847c9e00fb9225559a0e6884c155e11e27b.png)

---

<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:** [Août 18, 2026, 2:16 UTC](https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590/2 "2026-08-18T02:16:59Z")

</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 des libellés trop longs sur les boutons du déclencheur « changement d’état de l’appareil » :

> <https://github.com/GladysAssistant/Gladys/pull/2943>
>
> Implements feature request: https://community.gladysassistant.com/t/pb-sur-affic…hage-changement-detat-de-lappareil/10590
> 
> \### Description
> 
> In the scene editor, the "device state change" trigger lets you pick the target state with two buttons. For a motion sensor the labels are \`Mouvement détecté\` / \`Pas de mouvement\`, and they did not fit in the buttons: the text was cut off (see the screenshot in the forum topic).
> 
> \*\*Cause:\*\* the theme ships \`white-space: nowrap\` on \`.btn\`. The state buttons live in a \`col-6\` inside a \`col-md-5\` column, so they have a fairly narrow fixed width. Since the label could not wrap, any label longer than that width overflowed the button and got clipped.
> 
> \*\*Fix (CSS only):\*\* a shared \`deviceStateButton\` class in \`front/src/routes/scene/edit-scene/triggers/style.css\` that:
> 
> \- sets \`white-space: normal\` (plus \`overflow-wrap: anywhere\` for a single very long word) so the label wraps on several lines instead of overflowing,
> \- stretches the button to the height of its column (\`d-flex\` on the column + \`flex: 1\` / \`height: 100%\` on the button) so the two buttons stay the same height and aligned when only one of them wraps.
> 
> The class is applied to the three state widgets of this trigger that render such buttons: \`BinaryDeviceState\` (the one from the report), \`PresenceSensorDeviceState\` and \`DoorbellRingDeviceState\` — the last two show \`Si l'appareil est détecté\` / \`Sonnette actionnée\`, which have the same problem on narrow screens.
> 
> The French translations were deliberately \*\*not\*\* shortened: the fix is on the layout, so it holds for every language and for any current or future feature type with long value labels. No translation key was added or changed. The change is front-only and does not touch any behavior.
> 
> Checked at desktop and mobile widths: on \`xs\` the buttons take half of the full row width, on \`md+\` they wrap onto two lines and stay aligned.
> 
> \## Forum
> 
> Forum: https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590
> 
> \### Checklist
> 
> \- \[\] Tests pass: \`cd server && npm run coverage\` (Codecov requires 100% coverage on changed lines) and Cypress (\`npm run cypress:run\`) if the UI changed
> \- \[x\] Linter and prettier pass on both front and server (\`npm run eslint\`, \`npm run prettier\`)
> \- \[x\] No undocumented breaking change
> 
> Front checks run locally: \`npm run prettier\`, \`npm run prettier-check\`, \`npm run eslint\` (0 errors), \`npm run compare-translations\` (no errors), \`npm run build\` (success). \`server/\` was not modified, so the server test suite was not run. Cypress was not run locally because the Cypress binary is not installed in this environment — CI will run it.
> 
> This pull request was created by an automated Claude Code run.
> 
> \---
> 🤖 Generated with \[Claude Code\](https://claude.com/claude-code)
> 
> \---
> \_Generated by \[Claude Code\](https://claude.ai/code/session\_01YXRz5JiaM9N42djviseBRu)\_

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:** [Août 28, 2026, 12:32 UTC](https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590/3 "2026-08-28T12:32:42Z")

</div>