Skip to content

Fix automatic scrolling to the bottom of main page content #10740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Aug 6, 2025
Merged

Fix automatic scrolling to the bottom of main page content #10740

merged 5 commits into from
Aug 6, 2025

Conversation

JamesNK
Copy link
Member

@JamesNK JamesNK commented Jul 30, 2025 •
edited
Loading

Description

I noticed that scrolling to the bottom of main page content was broken on structured logs and traces. This broke in the most recent FluentUI update.

Also, when scrolling these grids the scroll bar position scrolling jumps around a lot. I think this bug has been around a while.

This PR improves scrolling behavior:

  • Add large overscan to pages to reduce scrolling jumps
  • Changing "scroll to the bottom of the page" flag no longer happens in resize event
  • Reset "scroll to the bottom of the page" flag when there is no scroll bar

Checklist

  • Is this feature complete?
    • Yes. Ready to ship.
    • No. Follow-up changes expected.
  • Are you including unit tests for the changes and scenario tests if relevant?
    • Yes
    • No
  • Did you add public API?
    • Yes
      • If yes, did you have an API Review for it?
        • Yes
        • No
      • Did you add <remarks /> and <code /> elements on your triple slash comments?
        • Yes
        • No
    • No
  • Does the change make any security assumptions or guarantees?
    • Yes
      • If yes, have you done a threat model and had a security review?
        • Yes
        • No
    • No
  • Does the change require an update in our Aspire docs?

@JamesNK JamesNK requested review from adamint and Copilot July 30, 2025 04:44
Copilot
Copilot AI reviewed Jul 30, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes automatic scrolling behavior on the Aspire Dashboard's main content pages, specifically addressing broken scroll-to-bottom functionality on structured logs and traces that occurred after a FluentUI update. The changes improve scrolling stability by reducing scroll position jumps and properly handling edge cases.

Key changes:

  • Enhanced scroll detection logic to handle container resize events and eliminate false positives
  • Added large overscan buffers to virtualized grids to reduce scrolling jumps during data updates
  • Improved state management for scroll-to-bottom behavior with better edge case handling

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/Aspire.Dashboard/wwwroot/js/app.js Core scrolling logic improvements with better state management and null handling
src/Aspire.Dashboard/Components/Pages/Traces.razor Added OverscanCount=100 to reduce scroll jumps in traces grid
src/Aspire.Dashboard/Components/Pages/TraceDetail.razor Added OverscanCount=100 to reduce scroll jumps in trace details grid
src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor Added OverscanCount=100 to reduce scroll jumps in logs grid
src/Aspire.Dashboard/Components/Pages/StructuredLogs.razor.cs Added trace logging for debugging data updates
src/Aspire.Dashboard/Components/Pages/Resources.razor Added OverscanCount=100 to reduce scroll jumps in resources grid

@adamint
Copy link
Member

adamint commented Jul 31, 2025 •
edited
Loading

Doesn't seem to work for structured logs?

Grabacion.de.pantalla.2025-07-31.a.la.s.12.36.10.p.m.mov

@JamesNK
Copy link
Member Author

JamesNK commented Jul 31, 2025

I don’t understand your video. Structured logs is correctly scrolled to the bottom when the page is navigated to or refreshed in it.

what is it showing that doesn’t work?

@MihuBot MihuBot mentioned this pull request Aug 5, 2025
Open
@JamesNK JamesNK force-pushed the jamesnk/continious-scroll-fix branch from 72b6c81 to c5fc90a Compare August 6, 2025 03:04
@JamesNK JamesNK mentioned this pull request Aug 6, 2025
Open
1 task
@adamint adamint enabled auto-merge (squash) August 6, 2025 18:20
@adamint adamint merged commit 70e18bb into main Aug 6, 2025
821 of 825 checks passed
@adamint adamint deleted the jamesnk/continious-scroll-fix branch August 6, 2025 23:08
@dotnet-policy-service dotnet-policy-service bot added this to the 9.5 milestone Aug 6, 2025
@JamesNK
Copy link
Member Author

JamesNK commented Aug 6, 2025

/backport to release/9.4

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 6, 2025

Started backporting to release/9.4: https://github.com/dotnet/aspire/actions/runs/16791008233

@github-actions github-actions bot mentioned this pull request Aug 6, 2025
Merged
@MihuBot MihuBot mentioned this pull request Sep 2, 2025
Open
@github-actions github-actions bot locked and limited conversation to collaborators Sep 6, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

Copilot code review Copilot Copilot left review comments

@adamint adamint adamint approved these changes

Assignees
No one assigned
Labels
area-dashboard
Projects
None yet
Milestone
9.5
Development

Successfully merging this pull request may close these issues.
2 participants
@JamesNK @adamint