zedyxer
1. September 2026 um 11:07
1
Hallo
Ich habe den Eindruck, dass es eine Anomalie bei den Geräte-Widgets gibt, und insbesondere bei den Öffnungen und Temperaturen im untenstehenden Screenshot:
Man sieht, dass es eine Verschiebung nach rechts bei den Geräten vom Typ Temperatur und Öffnung gibt. Für die grafische Konsistenz wäre es perfekt, wenn alles ausgerichtet wäre
Vielen Dank
Z.
Hallo,
Ich habe einen PR erstellt: fix(dashboard): align sensor device names by valentinhttr · Pull Request #3068 · GladysAssistant/Gladys · GitHub
Der Rand wurde nur im Dashboard korrigiert, da er in den anderen Anzeigen, die diese Komponente wiederverwenden, weiterhin nützlich ist.
Hallo zusammen!
Dieses Thema ist nun in Entwicklung .
Ein Pull Request wurde eröffnet, um die Namen der Sensoren im Geräte-Widget abzugleichen:
master ← claude/pr-3068-sensor-device-feature-jm8ugm
ouvert 07:12AM - 04 Sep 26 UTC
### Description
Alternative to #3068, which fixes the same misalignment with a … `!important` CSS override. This one removes the cause instead.
**The cause.** `SensorDeviceFeature.jsx` is the only feature component of the devices widget whose icon carries Bootstrap's `mr-2`:
```jsx
<i class={`mr-2 fe fe-${get(DeviceFeatureCategoriesIcon, `${category}.${type}`)}`} />
```
The 25+ other rows — `BinaryDeviceFeature`, `CoverDeviceFeature`, `SetpointDeviceFeature`, the mode selects, the light row — all render a bare `fe fe-*`. The class predates the Horizon theme by years (it is already there in #1756).
**Why it only shows now.** In a regular table the icon column is shared by every row, so the 8px went into the common column width: icons and names still lined up, the margin was simply invisible. The Horizon widget sets `.device-widget-table tr { display: flex }`, so each row became its own flex container — and the margin then enlarged the icon cell of read-only sensor rows only, pushing *temperature*, *door*, *hatch* 8px right while every other row stayed put.
**Why remove the class rather than cancel it.** Bootstrap's spacing utilities are `!important`, so a CSS answer has to reply with `!important` of its own, in a rule that duplicates the badge selector already defined ~100 lines above in `style.css`. And because the fix is necessarily scoped to `.device-widget-table`, the same 8px offset would come back in any other flex or grid layout that reuses these rows. Deleting one legacy token fixes it once, for every consumer, with no `!important` anywhere.
Changed:
- `SensorDeviceFeature.jsx` — drop `mr-2` from the sensor row icon.
- `SensorRowFeaturePreview.jsx` — the MQTT catalog preview duplicates the same markup on purpose, so it is kept in sync; otherwise the preview stops showing what the widget actually renders.
- The `style.css` section comment and the dashboard spec both claimed the Horizon device-list restyle was CSS-only with the feature components' markup untouched. Both now record this one exception, per the spec-truthfulness rule in `AGENTS.md`.
No visual change other than the intended one: the read-only sensor row now starts its name exactly where every other row does.
## Forum
Forum: https://community.gladysassistant.com/t/anomalie-affichage-ouverture-temperature/10779
### Checklist
- [x] Tests pass — no server change, so no server test/coverage impact. Cypress could not be installed locally (corrupted binary download from `download.cypress.io`) and there is no pixel or layout assertion covering these rows, but the `Cypress run` job is green on this branch in CI.
- [x] Linter and prettier pass on the front: `npm run prettier-check` clean, `npm run eslint` 0 errors (187 pre-existing warnings), `npm run compare-translations` clean, `npm run build` succeeds — re-run after merging `master` in.
- [x] No undocumented breaking change.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01MaxnD9wUM5YB4ZniChCXvy
Zögert nicht, dem PR zu folgen, zu testen (optional, besonders bei kleinen Anfragen) und euer Feedback hier zu hinterlassen, falls nötig.
