# Problème affichage intégration externe Z2M devices monitor

**URL:** <https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627>\
**Category:** Configuration\
**Created:** [Août 16, 2026, 7:45 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627 "2026-08-16T19:45:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 16, 2026, 7:45 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/1 "2026-08-16T19:45:04Z")

</div>

@prohand j’ai un soucis d’affichage des données :

 ![Capture d'écran 2026-08-16 212846](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/1/51f6917f5a8d142609fa220af81d4d18dd0f9b7d.png)

---

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Août 16, 2026, 7:55 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/2 "2026-08-16T19:55:34Z")

</div>

L’affichage est géré par le core  
Pour moi cela avait été corrigé ici :

> <https://github.com/GladysAssistant/Gladys/issues/2877>
>
> 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 Tu es bien dans le même cas avec 3 colonnes ?  
Et tu es bien sûr la dernière version de Gladys ? (4.86.1)

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 16, 2026, 8:01 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/3 "2026-08-16T20:01:48Z")

</div>

> [@prohand](#):
>
> @Chris75 Tu es bien dans le même cas avec 3 colonnes ?  
> Et tu es bien sûr la dernière version de Gladys ? (4.86.1)

oui je suis sur 3 colonnes et bien en 4.86.1  
par contre si je mets sur 2 colonnes j’ai bien les données

 ![Capture d'écran 2026-08-16 220133](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/8/58472c2b992413b8ea693eb31f5d957e3210d966.png)

---

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Août 16, 2026, 8:09 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/5 "2026-08-16T20:09:27Z")

</div>

@Chris75 Je ne reproduis pas le problème de mon côté

Tu as tenté en navigation privée et en vidant le cache ?

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 16, 2026, 8:23 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/6 "2026-08-16T20:23:13Z")

</div>

> [@prohand](#):
>
> Tu as tenté en navigation privée et en vidant le cache ?

oui et c’est toujours la même chose ( je suis sous firefox windows 11)

---

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Août 16, 2026, 8:25 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/7 "2026-08-16T20:25:14Z")

</div>

Si tu enleves celui là tu as toujours le problème ? :

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/f/7f3dd0dfb32e5d43c3911f3be1e7628ec4fe654d.png)

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 16, 2026, 8:31 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/8 "2026-08-16T20:31:21Z")

</div>

> [@prohand](#):
>
> Si tu enleves celui là tu as toujours le problème ? :

oui effectivement le problème disparait et tout le reste s’affiche correctement

---

<div class="post-metadata">

**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\
**Post date:** [Août 16, 2026, 8:36 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/9 "2026-08-16T20:36:45Z")

</div>

Merci pour le retour 🙂  
J’ai créé une issue : [Long text value breaks device widget in a 3-column dashboard layout · Issue #2917 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/issues/2917)

---

<div class="post-metadata">

**Author:** ![cursor-bot](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cursor-bot/32/22252_2.png) [@cursor-bot](https://community.gladysassistant.com/u/cursor-bot)\
**Post date:** [Août 17, 2026, 12:06 UTC](https://community.gladysassistant.com/t/probleme-affichage-integration-externe-z2m-devices-monitor/10627/10 "2026-08-17T12:06:40Z")

</div>

Salut tout le monde !

Ce sujet est désormais **en cours de développement**.

Une PR a été ouverte pour corriger l’affichage des valeurs texte longues dans le widget appareil :

> <https://github.com/GladysAssistant/Gladys/pull/2919>
>
> \> ⚠️ \*\*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.

N’hésitez pas à suivre la PR, à tester dès que possible et à faire vos retours ici.
