Issue with "device state change" display

Chris75 · August 15, 2026, 5:13pm

The text « motion detected » and « no motion » doesn’t fit in the buttons

cursor-bot · August 18, 2026, 2:16am

Hi everyone!

This topic is now in development.

A PR has been opened to fix the overflow of long labels on the « device state change » trigger buttons:

github.com/GladysAssistant/Gladys

Fix long label overflow in the device state change scene trigger (#2943)

master ← claude/device-state-trigger-button-text

ouvert 02:16AM - 18 Aug 26 UTC

Pierre-Gilles

+26 -6

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)_

Feel free to follow the PR, test (optional, especially for small requests), and share your feedback here if needed.

Topic		Replies	Views
Anomalie affichage (ouverture/température) Configuration v5	2	79	September 4, 2026
Problème d’affichage responsive avec débordement horizontal Demandes livrées in-progress	1	49	September 4, 2026
Problème affichage intégration externe Z2M devices monitor Configuration	8	49	August 17, 2026
Capteur binaire : afficher la date du dernier changement d'état Demande de fonctionnalités in-progress	8	218	September 10, 2026
Sur mobile, noms d'appareils mqtt tronqué sur le dashboard Configuration v5	5	43	August 29, 2026

Issue with "device state change" display

Related topics