Fix custom host vital height on host details - #52588
Conversation
A custom vital's label embeds a small edit button whose 28px height exceeds the label's line box, which stretched the DataSet and left the vital misaligned against its neighbors in the grid. Cancel the button's vertical padding so the row keeps the text's height while the button keeps its full click target.
|
|
||
| // Cancel the pencil icon's vertical padding to keep the custom vital aligned with the rest of the grid. | ||
| .button { | ||
| margin-block: -$pad-xsmall; |
There was a problem hiding this comment.
🟢 Approval recommended
The change is narrowly scoped to the custom vital title’s edit button styling and aligns with existing spacing patterns in this area without introducing behavioral risk.
Warning
- Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.
Pull request overview
This PR fixes a UI alignment issue on the Host details “Vitals” card where the edit (pencil) button next to a custom host vital label increased the label row height and caused misalignment versus standard vitals.
Changes:
- Adjusted styling for the custom vital label/title wrapper to neutralize the pencil icon button’s vertical contribution to layout height.
File summaries
| File | Description |
|---|---|
| frontend/pages/hosts/details/cards/Vitals/_styles.scss | Adds a scoped style tweak to keep the custom vital label row height consistent by applying negative block margins to the inline edit button. |
Review details
Files excluded by content exclusion policy (1)
- changes/51096-custom-host-vital-height
- Files reviewed: 1/2 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. WalkthroughUpdated custom host vital title styling to cancel the pencil button’s vertical padding with a negative block margin. Added a changelog entry for the height alignment fix. Merge Risk: ⚪ Minimal · up to Custom host vital labels now align with regular vital rows without reducing the edit button’s click target. No current merge-blocking risk remains. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #52588 +/- ##
=======================================
Coverage 75.79% 75.79%
=======================================
Files 4097 4097
Lines 247480 247480
Branches 14105 14105
=======================================
Hits 187578 187578
Misses 59725 59725
Partials 177 177
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Related issue: Resolves #51096
The pencil button in a custom host vital's label is taller than the label's line box, which stretched the row and left custom vitals misaligned against every other vital on the host details page.
Checklist for submitter
changes/,orbit/changes/oree/fleetd-chrome/changes.See Changes files for more information.
Testing
Before
"Custom vital" and "zzzvital" misaligned
After
"Custom vital" and "zzzvital" now aligned
Frontend
Summary by CodeRabbit