Hola
Me parece que hay una anomalía en los widgets de dispositivos, y en particular en las aperturas y temperaturas en la captura de pantalla de abajo:
Se puede ver que hay un desplazamiento a la derecha para los dispositivos de tipo temperatura y apertura. Para la coherencia gráfica, sería perfecto alinear todo
Gracias a vosotros
Z.
Hola,
He creado una PR: fix(dashboard): align sensor device names by valentinhttr · Pull Request #3068 · GladysAssistant/Gladys · GitHub
El margen solo se ha corregido en el panel de control, ya que sigue siendo útil en otras visualizaciones que reutilizan este componente.
¡Hola a todos!
Este tema ahora está en desarrollo .
Se ha abierto una PR para alinear los nombres de los sensores en el widget de dispositivos:
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
No dudes en seguir la PR, probar (opcional, especialmente para pequeñas solicitudes) y dar tus comentarios aquí si es necesario.
