You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
⚠️This pull request was produced by an automated routine and has NOT been reviewed by a human. Please review the diff carefully — in particular the visual checks listed at the bottom — before merging.
A text device feature (DEVICE_FEATURE_CATEGORIES.TEXT) carries free-form content that the device decides. The Z2M Devices Monitor integration publishes a Silent device names feature whose value is a comma-separated list of Zigbee device names — a string with no space to break on, so the browser keeps it on a single line.
The device widget renders its features in a table card-table inside a .table-responsive wrapper, with automatic table layout. A cell whose content cannot wrap keeps its full one-line width, so the table grows past the card and .table-responsive starts scrolling horizontally: the values of the other features end up outside the visible area and look missing. The narrower the card, the sooner it happens — a 3-column dashboard layout is enough, while a 2-column one is still wide enough to fit the value, which matches exactly what the reporter observed (and why removing the text feature made the other values come back).
The fix wraps the text value with overflow-wrap: anywhere. anywhere is deliberate rather than break-word: it is the value that also lowers the cell's min-content width, which is what lets the column shrink back inside the card. break-word wraps visually but leaves the intrinsic width untouched, so the table would still overflow. This is the same idiom already used in the codebase for external-integration texts (front/src/routes/integration/all/external-integration/integrationText.css) and for the chart tooltips (front/src/style/index.css).
Two files touched:
front/src/components/boxs/device-in-room/device-features/style.css — new .textValue class (with a comment explaining the anywhere vs break-word choice).
front/src/components/boxs/device-in-room/device-features/sensor-value/TextDeviceValue.jsx — applies the class to the value container.
Scope is intentionally limited to the read-only text sensor value. The writable text/select feature already goes through AdaptiveOptionControl, which was made narrow-card aware in #2878, and is untouched here.
What I verified locally (in front/, with real dependencies installed)
npm run prettier-check → All matched files use Prettier code style! (prettier 1.19.1, the pinned version; only the file I touched was formatted)
npm run eslint → 0 errors (196 pre-existing warnings, none in the changed files)
npm run compare-translations → No errors found
npm run build → built successfully; confirmed the generated CSS bundle contains textValue{overflow-wrap:anywhere} and that the JS bundle references the class, so the CSS-module wiring is correct
No server code changed, so no server test suite was run.
What a human must check before merge
This is a CSS/layout fix and it was not visually confirmed — Cypress could not run in the sandbox (the binary download fails) and no browser was available. Please confirm by eye:
A device widget containing a text feature with a long value (e.g. the Z2M Devices Monitor Silent device names feature, or any long comma-separated string with no spaces) in a 3-column dashboard layout: the value now wraps onto several lines, the card no longer scrolls horizontally, and the icon / label / value of the other features are all visible again.
The same widget in 2-column and 1-column / mobile layouts, to confirm nothing regressed where it already worked.
That the right-aligned (text-right) look of the wrapped value is acceptable — a wrapped value is ragged on the left.
That a very long list (many dozens of names) produces an acceptably tall row. This PR makes the value wrap rather than truncate, so the widget grows vertically instead of overflowing horizontally. If the project would rather clamp or scroll that content, that is a follow-up design decision, not something this fix takes.
Firefox specifically (the browser in the report) as well as a Chromium-based browser — overflow-wrap: anywhere affecting intrinsic sizing is the load-bearing behaviour here.
Checklist
Linter and prettier pass on front (npm run eslint, npm run prettier)
No undocumented breaking change
Cypress not run (unavailable in the sandbox) — see the manual visual checks above
A text device feature carries free-form content published by the device.
The Z2M Devices Monitor integration exposes a "Silent device names"
feature whose value is a comma-separated list of Zigbee names with no
space to break on, so the browser kept it on a single line. The device
card table is auto-laid-out, so that one cell held its full one-line
width, the table grew past the card and the other feature values were
pushed out of the visible area — reproducible as soon as the card is
narrow, i.e. in a 3-column dashboard layout.
Wrap the text value with overflow-wrap: anywhere, the only value that
also lowers the cell's min-content width so the column can shrink back
into the card.
Fixes#2917
Included review availability: Your plan includes up to 8 reviews per rolling hour; 5 remain after this review.
📝 Walkthrough
Walkthrough
The device features table and text value renderer now wrap long labels and values within narrow device cards. This prevents long text from causing horizontal overflow.
The device features table uses style.deviceFeaturesTable. Table cells and sensor value badges can wrap. Text values use style.textValue with overflow-wrap: anywhere.
This localized front-end change makes long text feature values wrap inside device cards without altering writable controls or server behavior; no actionable merge-blocking risk remains after normal checks and review.
Poem
A rabbit wraps each value tight,
Long names stay within the light.
No card expands, no words escape,
Each feature keeps its proper shape. 🐇
✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.52%. Comparing base (a40d19f) to head (930020b). ⚠️ Report is 20 commits behind head on master.
The reason will be displayed to describe this comment to others. Learn more.
Stale comment
Front-only layout fix for #2917. A read-only TEXT feature whose last_value_string has no wrap opportunities (the Z2M Devices Monitor comma-separated name list) inflates the auto-laid-out card-table past the card; .table-responsive then scrolls and the other feature values look missing in a 3-column dashboard.
overflow-wrap: anywhere on the value container is the right property: unlike break-word, it also lowers the cell’s min-content width, which is what lets the column shrink back inside the card. Same idiom as integrationText.css and the chart tooltip rule. The CSS-module import (style from '../style.css') matches the rest of device-features/, and overflow-wrap is inherited by the inner <span>. Scope is correctly limited to the read-only sensor row; the writable text/select path already goes through AdaptiveOptionControl (#2878).
No constants.js / device-type changes. Not risk:high. Not needs:human-review.
Residuals (not blocking)
Visual confirmation in Firefox at 3 columns is still needed — the author already listed this; .table-vcenter only sets vertical-align, so it should not fight the wrap.
A very long list will grow the row vertically instead of truncating. That is a product follow-up, not a defect in this fix.
overflow-wrap: anywhere is ignored on Safari < 15.4 (the JS bundle still targets Safari 13 for wall tablets). Other call sites already accept that; browserslistdefaults covers current Safari.
The reason will be displayed to describe this comment to others. Learn more.
Stale comment
Cannot approve: this SHA does not fix the overflow.
Pierre-Gilles tested the branch with many devices and still sees values clipped off the right of the card. The screenshots match that: Pas de valeur récente badges and toggles are cut off, while a TEXT value that already has spaces wraps. So the remaining overflow is not the no-space TEXT cell this PR targets.
overflow-wrap: anywhere on TextDeviceValue is the right property for a comma-separated list (and should be kept), but the device widget is an auto-layout table.card-table inside .table-responsive. Feature names, Tabler nowrap badges, sliders and switches all contribute min-content; once that exceeds the 3-column card, the wrapper scrolls and sibling values look missing — the #2917 symptom. Wrapping one inner <div> cannot stop that, and on Firefox (the original report) anywhere on a table-cell descendant often does not shrink auto-layout min-content anyway.
Please constrain the table itself (table-layout: fixed; width: 100% on the device-card table, wrap on name cells, allow the no-recent-value badge to wrap) and re-check a 3-column dashboard. Until the card no longer scrolls horizontally, this should not merge.
No constants.js / device-type changes. Not risk:high. Not needs:human-review — this is an incomplete layout fix, not a philosophy question.
Wrapping the TEXT value alone did not fix#2917: the card renders its
features in an auto-laid-out table inside .table-responsive, and an auto
table can never be narrower than the sum of its columns' min-content
widths. Several cells set a floor on that sum, so the wrapper kept
scrolling horizontally and the values on the right stayed out of sight
even on a branch where the TEXT value already wrapped.
Remove the two floors that dominate it:
- the feature name cell, which a long label such as "Compteur électrique
index - Consommation 30 minutes" holds open, now uses overflow-wrap:
anywhere, the only value that also lowers the cell's min-content width;
- Tabler renders sensor value badges with white-space: nowrap, so "Pas de
valeur récente" counted as one unbreakable word and reserved its full
width; letting it wrap drops that floor to its longest word.
Both rules are scoped to the device card table, so no other card-table in
the app is affected. Column sizing is unchanged whenever the card is wide
enough; only the point at which the table can no longer shrink moves.
Autofix-Pass: 1
The reason will be displayed to describe this comment to others. Learn more.
Stale comment
5e24966 addresses the overflow Pierre reproduced on the first SHA. Wrapping only .textValue left the auto card-table held open by two other min-content floors: the name cell (td:nth-child(2) / rowName on all 26 row types) and Tabler’s .badge { white-space: nowrap } (Pas de valeur récente). Both now wrap, scoped to deviceFeaturesTable. :global(.badge) is the right CSS-modules escape so Tabler’s class is not hashed.
Skipping table-layout: fixed; width: 100% is the right call. With no column widths, fixed layout would give the icon column a third of the card, and .setpointHorizontalControls { min-width: 7rem } would overflow the cell instead of the table. Lowering the auto-table floors keeps wide-card column sizing unchanged.
.textValue { overflow-wrap: anywhere } stays as the no-space TEXT (Z2M Silent device names) piece. No constants.js / device-type changes. Not risk:high. Not needs:human-review.
Residuals (not blocking)
Apply overflow-wrap: anywhere to every td (not only nth-child(2)) if Firefox still overflows on a no-space TEXT value: wrap currently sits on the inner .textValue div for the value column, and some Firefox auto-table paths ignore descendant anywhere when computing min-content. The name column already has it on the td itself.
A 3-column check in Firefox is still the visual confirmation this PR asks for.
A very long list still grows the row vertically. Product follow-up, not a defect.
The previous pass lifted the min-content floor off the feature name cell
only (td:nth-child(2)). The value column still relied on overflow-wrap
sitting on the inner .textValue div, and that is exactly the #2917 case:
a comma-separated list of Zigbee device names is one unbreakable token,
and Firefox — the browser in the report — frequently keeps an auto
table's min-content width unchanged when the property is set on a
descendant of the cell rather than on the cell itself.
Widen the selector to .deviceFeaturesTable td so the constraint applies
to the cell in every column. The icon cell holds a lone <i> and the
colour picker row is a single colspan cell, so neither changes; controls
keep their own min-width, which overflow-wrap does not touch.
Autofix-Pass: 2
The reason will be displayed to describe this comment to others. Learn more.
930020b addresses the last residual from the previous pass. Wrapping only td:nth-child(2) left the value column depending on overflow-wrap on the inner .textValue div — the descendant-of-a-cell case Firefox often ignores when computing auto-table min-content, and exactly the #2917 value (a comma-separated Zigbee name list with no spaces). The selector is now .deviceFeaturesTable td, so every cell, including the value column, can shrink.
The rest of 5e24966 still stands: name cells wrap, Tabler .badge { white-space: nowrap } is lifted via :global(.badge) so Pas de valeur récente is no longer an unbreakable floor, and skipping table-layout: fixed remains the right call (equal columns would give the icon a third of the card; .setpointHorizontalControls { min-width: 7rem } would then overflow the cell). .textValue is now redundant with the cell rule; harmless.
No constants.js / device-type changes. Not risk:high. Not needs:human-review.
Residuals (not blocking)
A 3-column check in Firefox is still the visual confirmation this PR asks for — no browser in this environment, and this SHA has not yet been eye-verified.
A very long list still grows the row vertically. Product follow-up, not a defect.
Controls that set their own min-width (setpoints, sliders, switches) still floor the value column; that is pre-existing and unchanged.
Sent by Cursor Automation: Automatic PR review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Pierre-Gilles
left a comment
Cursor
Fixes #2917
Description
What changed and why
A text device feature (
DEVICE_FEATURE_CATEGORIES.TEXT) carries free-form content that the device decides. The Z2M Devices Monitor integration publishes a Silent device names feature whose value is a comma-separated list of Zigbee device names — a string with no space to break on, so the browser keeps it on a single line.The device widget renders its features in a
table card-tableinside a.table-responsivewrapper, with automatic table layout. A cell whose content cannot wrap keeps its full one-line width, so the table grows past the card and.table-responsivestarts scrolling horizontally: the values of the other features end up outside the visible area and look missing. The narrower the card, the sooner it happens — a 3-column dashboard layout is enough, while a 2-column one is still wide enough to fit the value, which matches exactly what the reporter observed (and why removing the text feature made the other values come back).The fix wraps the text value with
overflow-wrap: anywhere.anywhereis deliberate rather thanbreak-word: it is the value that also lowers the cell's min-content width, which is what lets the column shrink back inside the card.break-wordwraps visually but leaves the intrinsic width untouched, so the table would still overflow. This is the same idiom already used in the codebase for external-integration texts (front/src/routes/integration/all/external-integration/integrationText.css) and for the chart tooltips (front/src/style/index.css).Two files touched:
front/src/components/boxs/device-in-room/device-features/style.css— new.textValueclass (with a comment explaining theanywherevsbreak-wordchoice).front/src/components/boxs/device-in-room/device-features/sensor-value/TextDeviceValue.jsx— applies the class to the value container.Scope is intentionally limited to the read-only text sensor value. The writable
text/selectfeature already goes throughAdaptiveOptionControl, which was made narrow-card aware in #2878, and is untouched here.Forum
Community discussion: https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/7
What I verified locally (in
front/, with real dependencies installed)npm run prettier-check→ All matched files use Prettier code style! (prettier 1.19.1, the pinned version; only the file I touched was formatted)npm run eslint→ 0 errors (196 pre-existing warnings, none in the changed files)npm run compare-translations→ No errors foundnpm run build→ built successfully; confirmed the generated CSS bundle containstextValue{overflow-wrap:anywhere}and that the JS bundle references the class, so the CSS-module wiring is correctWhat a human must check before merge
This is a CSS/layout fix and it was not visually confirmed — Cypress could not run in the sandbox (the binary download fails) and no browser was available. Please confirm by eye:
text-right) look of the wrapped value is acceptable — a wrapped value is ragged on the left.overflow-wrap: anywhereaffecting intrinsic sizing is the load-bearing behaviour here.Checklist
npm run eslint,npm run prettier)Generated by Claude Code
Summary by CodeRabbit