Preview Features heading overlaps with text underneath it when scrolling

[dbjorge]

Describe the bug

When enough preview features are visible to result in the preview features panel having a scroll bar, it is possible to enter a state where the "Preview Features" heading at the top of the panel is sticky but its background is not, so you end up with the panel's content and the heading getting drawn over each other.

This is probably low impact/priority overall because in practice we don't have that many preview features unless you use dev tools to show hidden-by-default feature flags.

To Reproduce Steps to reproduce the behavior:

1. Open canary or dev AI4Web
2. Enable hidden feature flags by opening from background page dev tools console and entering insightsFeatureFlags.enableFeature('showAllFeatureFlags')
3. Ensure that the details view is closed
4. using the popup/launchpad gear menu (not the details view gear menu), open "Preview Features"
5. Scroll down in the Preview Features panel

(note that the repro will be lost if you resize the window, or if you close/reopen the preview features panel from within the details view)

CodePen repro example

n/a

Expected behavior

Text shouldn't overlap. The heading behavior should probably be consistent with Settings, where the heading isn't sticky.

Screenshots

see above

Context (please complete the following information)

• OS Name & Version: Windows 11 22000.795
• AI-Web Version & Environment: Canary 2022.7.27.1622 (and dev from main as of writing)
• Browser Version: Edge stable 103.0.1264.71
• Target Page: n/a

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Additional context

n/a

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ferBonnin]

closing as this no longer repros

[dbjorge]

@ferBonnin and I discussed offline - it turns out the repro conditions are more specific than I'd originally written in the bug, but she's confirmed that she can also repro the issue with more specific steps. I've edited the description with more specific repro steps.

[peterdur]

Looks like this has been addressed by FluentUI in their https://github.com/microsoft/fluentui/pull/25665, work required is update plus validate no UX/A11y regressions. See also #6033.

[DaveTryon]

Internal feature https://dev.azure.com/mseng/1ES/_workitems/edit/2062851 is tracking the work for a FluentUI update. Moving this to blocked while we wait for that feature to start.

[DaveTryon]

This will get fixed when we are able to update to a more recent version of fluentui.