[David Fowler (davidfowl)]

Description

Fixes #21239.

When the metrics filter button is near the bottom of the viewport, the filter popup extends below the visible area. That cuts off the filter values, and the user can't reach them.

Root cause

ChartFilterPopover.razor.css positioned the popover dialog with anchor insets declared !important (top: anchor(bottom) !important, etc.), and set position-try-fallbacks: flip-block. In the CSS cascade, important author declarations outrank values from @position-try fallbacks. So the browser could never apply the flipped position, and the popover always rendered below the trigger even with no room there.

Measured on main at 1280x720 with the trigger scrolled to the bottom, the dialog spans y=686–841, past the 720px viewport.

Fix

Replace the important insets with inset: auto !important and position-area: block-end span-inline-start:

• inset: auto !important still neutralizes the inline insets that Fluent's popover sets.
• position-area is not an inset property, so flip-block can flip it to block-start when there's no room below.
• span-inline-start keeps the existing alignment, with the popover's right edge aligned to the trigger's right edge.

Other popovers in the dashboard use the same !important anchor-inset pattern (resource filters, URL column, user profile). I left them unchanged to keep this fix scoped; they could get the same treatment in a follow-up.

Before / after

	Screenshot
Before: trigger near the bottom (popup cut off)
After: trigger near the bottom (flips above the trigger)
After: room below the trigger (unchanged, opens below)

Tests

Added MetricsFilterPopoverTests (Playwright; outerloop like the rest of the project). It seeds a dotnet.gc.collections metric with a gc.heap.generation dimension and opens the filter popover:

• FilterPopover_TriggerNearViewportBottom_OpensAboveTriggerWithinViewport: asserts the dialog and its last option are inside the viewport, the dialog sits above the trigger, and the right edges are aligned.
  • Fails on main: Filter popover should be within the viewport (0-720) but spans 686.453125-841.453125.
  • Passes with the fix.
• FilterPopover_RoomBelowTrigger_OpensBelowTriggerAlignedToTriggerEnd: asserts the default placement is unchanged (below the trigger, right edges aligned). Passes before and after.

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
• Did you add public API?
  • No
• Does the change make any security assumptions or guarantees?
  • No
• Does the change require an update in our Aspire docs?
  • No

🤖 Posted by AspireAgent (AI Agent)

[github-actions]

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 21475

Or

• Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21475"

[github-actions]

Tests selector

13 / 100 PR test projects · 2 PR jobs, from 2 changed files.

Selected PR test projects (13 / 100)

Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests, Aspire.Hosting.Azure.Tests, Aspire.Hosting.Blazor.Tests, Aspire.Hosting.Dotnet.Tests, Aspire.Hosting.DotnetTool.Tests, Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests, Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests, Aspire.Templates.Tests

Selected PR jobs (2)

extension-e2e, native-dashboard-validation

---

How these were chosen — grouped by what changed

⚠️ 12 of the 13 selected test projects come from a single change — src/Aspire.Dashboard/Components/Controls/Chart/ChartFilterPopover.razor.css.

🔧 src/Aspire.Dashboard/Components/Controls/Chart/ChartFilterPopover.razor.css (changed source)
→ 12 via the project graph: Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests (3 hops), Aspire.Hosting.Azure.Tests (2 hops), Aspire.Hosting.Blazor.Tests (2 hops), Aspire.Hosting.Dotnet.Tests (2 hops), Aspire.Hosting.DotnetTool.Tests (2 hops), Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests (2 hops), Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests (2 hops)

📦 affected project Aspire.Dashboard
→ 1 test: Aspire.Templates.Tests

Job reasons

Job	Triggered by
extension-e2e	• src/Aspire.Dashboard/Components/Controls/Chart/ChartFilterPopover.razor.css • affected project Aspire.Dashboard
native-dashboard-validation	affected project Aspire.Dashboard

---

Selection computed for commit 0e3cc22.

[Copilot]

🟢 Approval recommended

There are no active review issues with the metrics filter popover positioning change.

No open issues 🎉

What changed in this PR

Fixes #21239 by allowing the dashboard’s metrics filter popover to open above its trigger when there is insufficient space below, keeping filter options accessible.

Changes:

• Replaces fixed anchor insets with position-area, enabling the existing flip-block fallback while overriding Fluent’s inline insets.
• Adds Playwright regression tests for viewport containment, placement above or below the trigger, and right-edge alignment.

File	Description
tests/​Aspire.Dashboard.Playwright.Tests/​Integration/​Playwright/​MetricsFilterPopoverTests.cs	Adds browser tests for constrained and roomy viewport placement.
src/​Aspire.Dashboard/​Components/​Controls/​Chart/​ChartFilterPopover.razor.css	Updates positioning so the popover can flip above its trigger.

_{Review effort: Balanced}

[github-actions]

Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt.