Truncate long host location with a tooltip

[nulmete]

Related issue: Resolves #48910

Truncates the Location vital and shows a tooltip if it doesn't fit the grid cell's width.

Checklist for submitter

If some of the following don't apply, delete the relevant line.

• Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
  See Changes files for more information.

Testing

• Added/updated automated tests
• QA'd all new/changed functionality manually

Frontend

• Attached a screenshot or screen recording of each user-visible change. For changes to existing UI, show the before and after.

Summary by CodeRabbit

• Bug Fixes
  • Long host locations now remain within the host details card instead of overflowing.
  • Truncated locations display a tooltip with the full value on both the host details and My device pages.
  • Locations that fit without truncation no longer display an unnecessary tooltip.

[Copilot]

🟢 Approval recommended

The UI change is localized, aligns with the linked issue’s expected behavior, and includes focused automated tests for the new tooltip behavior.

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 addresses display issues for the Location vital on the Host details and My Device pages by ensuring long location strings truncate cleanly and expose the full value via tooltip, matching the expected behavior in issue #48910.

Changes:

• Wrapped the Location vital’s display value with TooltipTruncatedText so truncated locations show the full value on hover.
• Added targeted layout/CSS constraints for the Location vital to allow ellipsis truncation instead of expanding the card width.
• Added RTL tests covering tooltip presence/absence based on truncation state (mocked via useCheckTruncatedElement).

File summaries

File	Description
frontend/pages/hosts/details/cards/Vitals/Vitals.tsx	Uses TooltipTruncatedText for the Location vital (link and non-link variants).
frontend/pages/hosts/details/cards/Vitals/Vitals.tests.tsx	Adds tests asserting tooltip behavior for long vs fitting location values.
frontend/pages/hosts/details/cards/Vitals/_styles.scss	Adds min-width: 0 and cursor inheritance fixes to enable truncation and preserve link pointer cursor.
changes/48910-location-truncation-tooltip	Changes entry (content excluded from this review by policy).

Review details

Files excluded by content exclusion policy (1)

• changes/48910-location-truncation-tooltip

• Files reviewed: 3/4 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.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 8701adee-651d-4693-9de1-ac7da58055c7

📥 Commits

Reviewing files that changed from the base of the PR and between 153365a and 4d5edb3.

📒 Files selected for processing (4)

• changes/48910-location-truncation-tooltip
• frontend/pages/hosts/details/cards/Vitals/Vitals.tests.tsx
• frontend/pages/hosts/details/cards/Vitals/Vitals.tsx
• frontend/pages/hosts/details/cards/Vitals/_styles.scss

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

---

Walkthrough

The Vitals location value now uses TooltipTruncatedText with a fixed positioning strategy. New styles constrain the location and preserve link cursor behavior. Tests cover tooltips for truncated locations on host details and My device pages, plus the absence of a tooltip when the location fits. A changelog entry documents the fix.

Merge Risk: ⚪ Minimal · up to 4d5ed

Vitals location values now truncate cleanly while preserving the full value in a tooltip, with the location modal remaining available for the full location. No current merge-blocking risk is identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The implementation addresses all coding objectives in issue [#48910]. It truncates long location values, adds hover tooltips on Host Details and My Device pages, fixes Host Details sizing, and preserv…
Out of Scope Changes check	✅ Passed	All changes are directly related to the location display issue in [#48910]. The tests, styling, component updates, and changes file support the requested behavior.
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 2…
Title check	✅ Passed	The title clearly and concisely describes the primary change: truncating long host locations and showing them in a tooltip.
Description check	✅ Passed	The description identifies the related issue, explains the behavior change, confirms automated tests and manual QA, includes the required changes file, and provides screenshots for the frontend change…

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch nulmete/location-truncation-tooltip

---

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 75.80%. Comparing base (7a1227f) to head (4d5edb3).
⚠️ Report is 15 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #52604      +/-   ##
==========================================
+ Coverage   75.79%   75.80%   +0.01%     
==========================================
  Files        4097     4097              
  Lines      247480   247481       +1     
  Branches    14105    14105              
==========================================
+ Hits       187578   187611      +33     
+ Misses      59725    59693      -32     
  Partials      177      177              

Flag	Coverage Δ
frontend	67.78% <100.00%> (+0.08%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.