Fix truncation of selected dashboard dropdown values - #20426
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 20426Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 20426" |
Tests selector13 / 99 PR test projects · 2 PR jobs, from 1 changed file. Selected PR test projects (13 / 99)
Selected PR jobs (2)
How these were chosen — grouped by what changed
🔧 📦 affected project Job reasons
Selection computed for commit |
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The focused visual-only CSS change is consistent with the stated behavior and manual validation.
Review effort: Balanced
Findings: None
What changed in this PR
Updates shared dashboard dropdown styling so long selected values truncate with an ellipsis without affecting editable comboboxes.
Changes:
- Constrains selected dropdown button text to one line.
- Adds overflow and ellipsis styling.
| File | Description |
|---|---|
src/Aspire.Dashboard/wwwroot/css/controls.css |
Adds selected-value truncation styling. |
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Documents the fix from microsoft/aspire#20426 where long resource names in dashboard dropdown selectors (Console logs, Metrics) now truncate with an ellipsis instead of being abruptly cut off. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Pull request created: #1741
|
|
📝 Documentation has been drafted in microsoft/aspire.dev#1741 targeting Drafted a docs PR. Triggered signals: Note This draft PR needs human review before merging. |
|
/backport to release/13.6 |
|
Started backporting to |
…20430) Backport of #20426 to release/13.6 /cc @JamesNK ## Customer Impact Long selected resource names in dashboard dropdowns are hard-cut without an ellipsis, making it unclear that the value is truncated. ## Testing Manually verified in TestShop on the Console and Metrics resource selectors with long resource names; `git diff --check` passed. ## Risk Low. The change is localized CSS for the shared non-editable dropdown button and leaves expanded options and editable combobox inputs unchanged. ## Regression? Yes Co-authored-by: James Newton-King <james@newtonking.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Description
Long resource names in dashboard selectors were hard-cut before the chevron, with no indication that the selected value continued. Selected values now remain on one line and truncate with an ellipsis across dashboard dropdowns. The expanded options still show the full resource name.
The shared dropdown button is constrained so its selected text cannot enlarge a FluentField grid track beyond the control's width. Editable combobox inputs are unchanged.
User-facing usage
Select a resource with a long name on the Console or Metrics page: the selected name ends in an ellipsis, and opening the dropdown shows the full name.
Screenshots / Recordings
Validation: manually verified in TestShop on the Console and Metrics resource selectors with long resource names, and ran
git diff --check. No unit tests were added for this visual-only CSS change.Fixes # (issue)
Checklist
<remarks />and<code />elements on your triple slash comments?