Repository navigation
Keep the legacy Resources filter popup inside the viewport when the resource graph is disabled - #21518
Keep the legacy Resources filter popup inside the viewport when the resource graph is disabled#21518David Fowler (davidfowl) wants to merge 1 commit into
Conversation
When Dashboard:UI:DisableResourceGraph is set there is no tabs row, so the filter button renders near the left edge of the page. The popup was right-aligned to the button with !important inset anchors, which @position-try fallbacks cannot override, so it overflowed the left edge. Use position-area with inline/block flip fallbacks instead. Fixes #20822 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 -- 21518Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21518" |
Tests selector13 / 100 PR test projects · 2 PR jobs, from 2 changed files. Selected PR test projects (13 / 100)
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.
🟢 Approval recommended
No active review issues remain for the legacy Resources filter popup positioning change.
No open issues 🎉
What changed in this PR
Fixes #20822 by keeping the legacy Resources filter popup inside the viewport when Dashboard:UI:DisableResourceGraph=true. The change targets the legacy dashboard retained after the dashboard redesign.
Changes:
- Replaces fixed anchor insets with
position-areaand horizontal/vertical fallback positions, preserving the default below-button, right-aligned placement. - Adds a Playwright regression test that disables the resource graph and checks horizontal viewport containment and placement below the filter button.
| File | Description |
|---|---|
| tests/Aspire.Dashboard.Playwright.Tests/Integration/Playwright/LegacyResourcesFilterPopupTests.cs | Adds regression coverage for popup placement with the resource graph disabled. |
| src/Aspire.Dashboard/Components/Legacy/Pages/Resources.razor.css | Enables fallback positioning so the filter popup can avoid viewport clipping. |
Review effort: Balanced
Description
Fixes #20822
When
Dashboard:UI:DisableResourceGraph=true, the Resources page filter popup opens leftward and is cut off by the left edge of the viewport, so resources can't be filtered.Root cause
Since #21412 this filter popup is only rendered by the previous (legacy) experience (
/legacy/resources). The modernPages/Resourcescomponent has no route.Legacy/Pages/Resources.razor.cssanchored the popup dialog with!importantinsets:right: anchor(right),top: anchor(bottom), andleft/bottom: auto.@position-tryfallbacks can't override!importantauthor insets. The only fallback wasflip-block, and it never applied.With the graph disabled there is no tabs row, so the filter button falls back to the page-header toolbar near the left edge. The popup therefore extends past x=0.
Fix
Clear Fluent's inline insets with
inset: auto !importantand position the dialog withposition-area: block-end span-inline-start. This keeps the existing look: below the button and right-aligned to it. The change addsposition-try-fallbacks: flip-inline, flip-block, flip-block flip-inline, which works becauseposition-areais not an inset.When the right-aligned popup doesn't fit, it now flips to align with the button's left edge. This is the same approach as the chart filter popover fix in #21475.
Evidence
New Playwright regression test
LegacyResourcesFilterPopupTests.FilterPopup_ResourceGraphDisabled_StaysInsideViewport:Dashboard:UI:DisableResourceGraph=true, opens/legacy/resourcesat 1280×900, and clicks the filter button.Filter popup starts at x=-50.4375, outside the left edge of the viewport.Before, the popup is clipped at the left edge:
After, the popup flips to align with the button's left edge and is fully visible:
Graph-enabled layout (the default) is unchanged. I ran a functional Playwright check of
/legacy/resourceswith the graph enabled:Validation
Local Playwright run (Chrome) of
LegacyResourcesFilterPopupTestsandResourcesTests: 10/10 passed.Dashboard Playwright tests are outerloop, so PR CI doesn't run them; the runs above are local.
Checklist
CI
Exact-head CI on
9987a1d5is green.I reran the failed jobs once, and all of them passed. The first-attempt failures were unrelated to this CSS-only change:
DenoAppFixtureinit timed out on Windows Hosting.JavaScript (the [CI Failure] Flaky: MySqlFunctionalTests.WithDataShouldPersistStateBetweenUsages times out because DCP state.sqlite3 is locked (SQLITE_BUSY) #20554 family).🤖 Posted by AspireAgent (AI Agent)