Fix long label overflow in the device state change scene trigger - #2943
Conversation
The theme sets `white-space: nowrap` on `.btn`, so the state buttons of the
"device state change" trigger could not wrap. With their fixed column width,
long labels such as the motion sensor ones ("Mouvement détecté" / "Pas de
mouvement") overflowed the button and were cut off.
Add a shared `deviceStateButton` class that lets the label wrap on several
lines and stretches the button to the height of its column, so a pair of
buttons stays aligned when only one of them wraps. Applied to the binary,
presence sensor and doorbell state widgets, which all render such buttons.
This is a CSS-only fix, so it works for any language and any feature type.
Co-Authored-By: Claude <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
Included review availability: Your plan provides up to 8 included reviews per hour; 5 remain after this review. 📝 WalkthroughWalkthroughThe scene trigger device-state buttons now use flex layout and shared wrapping styles. Binary, doorbell, and presence sensor components import the stylesheet and apply the ChangesDevice state button layout
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to The change only adjusts wrapping and alignment for long device-state labels; no actionable merge-blocking risk remains after normal checks and review. Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying gladys-plus with
|
| Latest commit: |
700eb43
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c21f84c9.gladys-plus.pages.dev |
| Branch Preview URL: | https://claude-device-state-trigger.gladys-plus.pages.dev |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2943 +/- ##
=======================================
Coverage 99.53% 99.53%
=======================================
Files 1258 1258
Lines 91191 91191
=======================================
Hits 90770 90770
Misses 421 421 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
🐳 A Docker image has been built for this branch and pushed to the GitHub Container Registry. You can test this pull request (AMD64 only) by pulling the image below: For example, run it with: sudo docker run -d \
--log-driver json-file \
--log-opt max-size=10m \
--cgroupns=host \
--restart=always \
--privileged \
--network=host \
--name gladys-claude-device-state-trigger-button-text \
-e NODE_ENV=production \
-e SERVER_PORT=80 \
-e TZ=Europe/Paris \
-e SQLITE_FILE_PATH=/var/lib/gladysassistant/gladys-production.db \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /var/lib/gladysassistant:/var/lib/gladysassistant \
-v /dev:/dev \
-v /run/udev:/run/udev:ro \
ghcr.io/gladysassistant/gladys-preview:claude-device-state-trigger-button-textThis comment and the image are automatically updated on every new commit pushed to this pull request. Need an ARM64 image (Raspberry Pi, Apple Silicon, …)? Comment |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
There was a problem hiding this comment.
Re-reviewed after merging master into claude/device-state-trigger-button-text. The four-file front diff is unchanged; the merge did not alter these trigger widgets or the layout they sit in.
Tabler’s .btn still ships white-space: nowrap, and the two state buttons still live in col-6 inside a col-md-5 column, so long labels (French motion: “Mouvement détecté” / “Pas de mouvement”) were clipped. The shared deviceStateButton class is the right fix: white-space: normal overrides the theme, overflow-wrap: anywhere covers a single unbreakable word, and stretching the button in a d-flex column keeps a pair aligned when only one label wraps.
Covering BinaryDeviceState (the reported widget) plus PresenceSensorDeviceState and DoorbellRingDeviceState is complete for this trigger — the other device-state widgets use react-select. Leaving the translations alone is the right call: wrapping holds for every language and any future long value label. No server/utils/constants.js category/type changes, and no behavior change.
CSS-module import of triggers/style.css matches CalendarEventIsComing.jsx; the hashed class + later chunk load beats .btn at equal specificity. Front test/build, Cypress, and Docker are green on this SHA.
Not risk:high. Not needs:human-review.
Residual (not this PR): Server test is red here on two Device.migrate 2s timeouts (should move the whole history in slices…, should cap each statement when every state shares the same timestamp). Same suite was green on 23d58eb; this change does not touch the server. That flake should not block this CSS fix.
Sent by Cursor Automation: Automatic PR review
2 participants
Implements feature request: https://community.gladysassistant.com/t/pb-sur-affichage-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: nowrapon.btn. The state buttons live in acol-6inside acol-md-5column, 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
deviceStateButtonclass infront/src/routes/scene/edit-scene/triggers/style.cssthat:white-space: normal(plusoverflow-wrap: anywherefor a single very long word) so the label wraps on several lines instead of overflowing,d-flexon 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),PresenceSensorDeviceStateandDoorbellRingDeviceState— the last two showSi 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
xsthe buttons take half of the full row width, onmd+they wrap onto two lines and stay aligned.Forum
Forum: https://community.gladysassistant.com/t/pb-sur-affichage-changement-detat-de-lappareil/10590
Checklist
cd server && npm run coverage(Codecov requires 100% coverage on changed lines) and Cypress (npm run cypress:run) if the UI changednpm run eslint,npm run prettier)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
Generated by Claude Code
Summary by CodeRabbit