Problem mit der Anzeige der externen Z2M-Geräteüberwachung

Chris75 · 16. August 2026 um 19:45

@prohand ich habe ein Problem mit der Anzeige der Daten:

prohand · 16. August 2026 um 19:55

Die Anzeige wird vom Core verwaltet
Für mich wurde das hier behoben:

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 Bist du auch in demselben Fall mit 3 Spalten?
Und bist du sicher, dass du die neueste Version von Gladys hast? (4.86.1)

Chris75 · 16. August 2026 um 20:01

eben ja, ich habe 3 Spalten und bin auf 4.86.1
aber wenn ich auf 2 Spalten umstelle, habe ich die Daten

prohand · 16. August 2026 um 20:09

@Chris75 Ich kann das Problem auf meiner Seite nicht reproduzieren

Hast du es im privaten Modus und nach dem Leeren des Caches versucht?

Chris75 · 16. August 2026 um 20:23

ebenfalls ja und es ist immer noch das Gleiche (ich bin unter Firefox Windows 11).

prohand · 16. August 2026 um 20:25

Wenn du den da entfernst, hast du dann immer noch das Problem?

Chris75 · 16. August 2026 um 20:31

effektiv ja, das Problem verschwindet und alles andere wird korrekt angezeigt

prohand · 16. August 2026 um 20:36

Danke für das Feedback
Ich habe ein Issue erstellt: Long text value breaks device widget in a 3-column dashboard layout · Issue #2917 · GladysAssistant/Gladys · GitHub

cursor-bot · 17. August 2026 um 12:06

Hallo zusammen!

Dieses Thema ist nun in Entwicklung.

Ein Pull Request wurde eröffnet, um die Anzeige langer Textwerte im Geräte-Widget zu beheben:

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

+47 -2

> ⚠️ **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. * Device feature tables now adapt better to narrow cards. * Sensor value badges can wrap normally, reducing horizontal overflow.

Zögert nicht, dem PR zu folgen, es so früh wie möglich zu testen und euer Feedback hier zu hinterlassen.

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

Problem mit der Anzeige der externen Z2M-Geräteüberwachung

Verwandte Themen