Display issue with external Z2M device integration monitor

Chris75 · August 16, 2026, 7:45pm

@prohand I have a display issue with the data:

prohand · August 16, 2026, 7:55pm

The display is managed by the core
For me, this had been fixed here:

github.com/GladysAssistant/Gladys

Display issue with 3-column layouts

ouvert 12:02PM - 14 Aug 26 UTC

fermé 12:30PM - 14 Aug 26 UTC

prohand

When using a dashboard with three columns, some device cards/widgets are not dis…played correctly. As shown in the screenshot, the cards in the 3-column layout can become cropped or partially hidden, especially when a card contains many controls or values. The available width does not appear to be handled correctly, causing some content to extend beyond the card/container boundaries and become inaccessible. The same cards display correctly when arranged differently, suggesting that the issue is related to the responsive/grid layout when three columns are used. Expected behavior All cards should adapt to the available column width and display their content correctly without being cropped, overflowing, or hidden. Actual behavior With three columns, some cards have content that is cut off or extends outside the visible area, making parts of the controls and information inaccessible. <img width="1179" height="1631" alt="Image" src="https://github.com/user-attachments/assets/63609255-bb29-4aab-b7d0-29d9f311b182" />

@Chris75 Are you in the same case with 3 columns?
And are you sure you’re on the latest version of Gladys? (4.86.1)

Chris75 · August 16, 2026, 8:01pm

yes I am on 3 columns and indeed on 4.86.1
but if I switch to 2 columns I do have the data

prohand · August 16, 2026, 8:09pm

@Chris75 I can’t reproduce the issue on my end

Have you tried in private browsing and clearing the cache?

Chris75 · August 16, 2026, 8:23pm

yes and it’s still the same (I’m on Firefox Windows 11)

prohand · August 16, 2026, 8:25pm

If you remove that one, do you still have the problem?

Chris75 · August 16, 2026, 8:31pm

yes indeed the problem disappears and everything else displays correctly

prohand · August 16, 2026, 8:36pm

Thanks for the feedback
I created an issue: Long text value breaks device widget in a 3-column dashboard layout · Issue #2917 · GladysAssistant/Gladys · GitHub

cursor-bot · August 17, 2026, 12:06pm

Hi everyone!

This topic is now in development.

A PR has been opened to fix the display of long text values in the device widget:

github.com/GladysAssistant/Gladys

fix: keep long text feature values inside the device widget (#2917) (#2919)

master ← claude/issue-2917

ouvert 12:39AM - 17 Aug 26 UTC

Pierre-Gilles

+16 -1

> ⚠️ **This pull request was produced by an automated routine and has NOT been r…eviewed by a human.** Please review the diff carefully — in particular the visual checks listed at the bottom — before merging. 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-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. ## 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 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: 1. 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. 2. The same widget in **2-column** and **1-column / mobile** layouts, to confirm nothing regressed where it already worked. 3. That the right-aligned (`text-right`) look of the wrapped value is acceptable — a wrapped value is ragged on the left. 4. 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. 5. 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 - [x] Linter and prettier pass on front (`npm run eslint`, `npm run prettier`) - [x] No undocumented breaking change - [ ] Cypress not run (unavailable in the sandbox) — see the manual visual checks above --- _Generated by [Claude Code](https://claude.ai/code/session_016TR38EyvjfMZnrmtGXzxgk)_ ## Summary by CodeRabbit * **Bug Fixes** * Improved display of long text values in device cards. * Text now wraps within available space, preventing content from forcing cards or tables beyond their layout.

Don’t hesitate to follow the PR, test as soon as possible, and share your feedback here.

Topic		Replies	Views
Problème d’affichage responsive avec débordement horizontal Demandes livrées in-progress	1	57	September 4, 2026
Anomalie affichage (ouverture/température) Configuration v5	2	84	September 4, 2026
Anomalie widget température Configuration v5	6	60	August 29, 2026
Pb sur affichage "changement d'état de l'appareil" Demandes livrées in-progress	1	44	August 18, 2026
Sur mobile, noms d'appareils mqtt tronqué sur le dashboard Configuration v5	5	51	August 29, 2026

Display issue with external Z2M device integration monitor

Related topics