Repository navigation
Size dashboard header notification badge to 18px - #20647
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 -- 20647Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 20647" |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The focused visual-only CSS change matches the description and has appropriate live-browser validation.
Review effort: Balanced
Findings: None
What changed in this PR
Makes the dashboard notification badge consistently 18×18px.
Changes:
- Fixes badge dimensions at 18px.
- Removes horizontal padding so
9+remains compact.
| File | Description |
|---|---|
src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css |
Applies fixed notification badge sizing. |
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Tests selector13 / 97 PR test projects · 2 PR jobs, from 3 changed files. Selected PR test projects (13 / 97)
Selected PR jobs (2)
How these were chosen — grouped by what changed
🔧 📦 affected project Job reasons
Selection computed for commit |
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
Documents the 18x18px / 22x18px notification badge sizing from microsoft/aspire#20647. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Pull request created: #1812
|
|
📝 Documentation has been drafted in microsoft/aspire.dev#1812 targeting Triggered signals: Note This draft PR needs human review before merging. |
Description
Keep the dashboard header notification badge compact, with enough room for the overflow indicator. Previously, single-digit badges were 20x20px and the
9+indicator expanded to approximately 26x20px. Badges now measure 18x18px for counts through 9 and 22x18px when the count exceeds 9.Remove the default horizontal padding and use a conditional overflow class to override the base width and minimum width to 22px. A shared
OverflowCountconstant configures both the component's overflow threshold and the numeric comparison that adds the class. Existing positioning, colors, and notification behavior are unchanged. No new dependencies are required.Fixes # (issue)
User-facing usage
Unread notifications appear on the header bell in a compact 18x18px badge. Counts above 9 display
9+in a 22x18px badge. Opening the notification center still clears the unread badge.Screenshots / Recordings
Captured with Playwright using real notifications from TestShop resource commands. Before screenshots temporarily remove the badge sizing overrides in the browser to reproduce the pre-PR appearance; the refreshed after screenshots show the 22px overflow width. Images are cropped to the header controls and captured at CSS pixel scale.
Validation
.\restore.cmd- passed.aspire resource aspire-dashboard rebuild --apphost 'C:\Development\Source\aspire-codereview\playground\TestShop\TestShop.AppHost\TestShop.AppHost.csproj' --non-interactive- passed; dashboard build completed with zero warnings and zero errors.aspire wait aspire-dashboard --apphost 'C:\Development\Source\aspire-codereview\playground\TestShop\TestShop.AppHost\TestShop.AppHost.csproj' --non-interactive- passed; dashboard healthy.9+.git diff --check- passed.Checklist
<remarks />and<code />elements on your triple slash comments?