fix(dashboard): align sensor device names

[valentinhttr]

Description

Read-only device features such as temperature and opening sensors render their icon with the Bootstrap mr-2 utility, which adds an 8px right margin.

This spacing is not a problem in the other place where these rows are reused: the MQTT feature preview uses a regular HTML table. Table columns are shared across rows there, so the margin contributes to the common icon-column width and does not make individual labels start at different positions. The MQTT-specific SensorRowFeaturePreview also applies mr-2 explicitly, confirming that the spacing is intentional in that context.

The dashboard device widget is different. Its Horizon layout turns every table row into an independent flex container. Consequently, the sensor icon margin enlarges only the first cell of read-only sensor rows, shifting names such as temperature, door, and hatch 8px to the right. Light and writable-feature rows do not carry that margin, which makes the misalignment visible.

This change therefore neutralizes the icon margin only inside the Horizon device widget flex layout. It fixes the alignment at the point where the legacy spacing conflicts with the new layout while preserving the intended spacing in regular-table consumers such as the MQTT preview.

Forum

Forum: https://community.gladysassistant.com/t/anomalie-affichage-ouverture-temperature/10779

Validation

• Front Prettier and Prettier check
• Front ESLint (0 errors; existing warnings only)
• Translation comparison
• Production front build
• No undocumented breaking change

Cypress was not run because this isolated CSS alignment change has no existing pixel/layout assertion in the suite.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 51dd3275-8757-4f0e-87e1-3c4facebcad5

📥 Commits

Reviewing files that changed from the base of the PR and between c2d5a70 and 1112295.

📒 Files selected for processing (1)

• front/src/routes/dashboard/style.css

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The dashboard stylesheet removes the right margin from read-only sensor icons in the first cell of device widget table rows. This overrides Bootstrap’s mr-2 utility and keeps sensor names aligned.

Changes

Dashboard sensor spacing

Layer / File(s)	Summary
Read-only sensor icon margin override front/src/routes/dashboard/style.css	Adds a rule that sets the right margin of .fe icons in the first table cell to 0 !important.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to 11122

This localized CSS change aligns read-only sensor names without changing behavior elsewhere; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: pierre-gilles

Poem

A rabbit checked the sensor row
The icons kept their space too slow
A margin vanished from the view
The names aligned as they should do
And carrots hopped in tidy flow

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: aligning sensor device names in the dashboard.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.55%. Comparing base (c2d5a70) to head (1112295).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3068   +/-   ##
=======================================
  Coverage   99.55%   99.55%           
=======================================
  Files        1269     1269           
  Lines       92998    92998           
=======================================
  Hits        92585    92585           
  Misses        413      413           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

One CSS rule, correctly scoped, for a real Horizon flex-layout bug.

SensorDeviceFeature is the only devices-widget row whose icon still carries Bootstrap mr-2 (margin-right: 0.5rem !important). Lights, switches and other controls do not. After .device-widget-table became independent flex rows, that 8px is no longer absorbed by a shared table column — it widens only the sensor icon cell and shifts those names (temperature, opening, …) to the right of light/switch names. That matches forum 10779.

The override is the right shape:

• .glass-theme — Horizon only
• .device-widget-table — dashboard widget flex layout only (MQTT catalog FeaturePreview reuses this component on a plain table-sm without that class, and the devices page is a real table with a shared first column — both keep mr-2)
• !important is required to beat Bootstrap's utility
• > .fe is the same direct-child icon the existing 2.25rem badge rule already styles

No DEVICE_FEATURE_* changes. Dashboard spec A.3 is unchanged (presentation, not a box contract). Not risk:high. Not needs:human-review.

Front test and Front build are green. Cypress was reasonably skipped: there is no pixel/layout assertion for this alignment.

Residual, not blocking: mr-2 on the JSX is a leftover (icon and name already live in separate <td>s), so the utility only inflates the icon cell. Dropping it from the component would slightly tighten MQTT preview too and is out of scope.

  

_{Sent by Cursor Automation: Automatic PR review}