Reflow failures in warning banners in assesssment/quick assess views
lisli1 opened this issue · 1 comments
Describe the bug
When there are two iframe informational messages at the top of the details view page and the page is zoomed to 400%, the second one overlaps the top one and not all the text is visible. The iframe info messages also overlap with the content in the requirement view.
To Reproduce
Steps to reproduce the behavior:
Variant 1 (harder to repro but worse impact)
- Ensure you have not enabled iframe permissions in the extension or use a fresh install of the extension to trigger the iframe permissions message.
- Go to https://www.washington.edu/accesscomputing/AU/before.html
- Start an Assessment or Quick Assess (turn on Quick Assess preview feature)
- Be at 400% window zoom
- Change the tab away from the target page so it is in a hidden state to trigger the second iframe message.
- See overlap in text
Variant 2 (easier to repro but less impact)
- Ensure you have not enabled iframe permissions in the extension or use a fresh install of the extension to trigger the iframe permissions message.
- Go to https://www.washington.edu/accesscomputing/AU/before.html
- Start an Assessment or Quick Assess (turn on Quick Assess preview feature)
- Ensure the details view window is at 100% zoom and resized such that warning banner contents can't fit on one line and the main content pane is vertically large enough to require a scroll bar (eg, 800x600)
- Navigate to any assisted requirement (eg, 2.1 keyboard navigation) and enable its visual helper
- See warning content spilling out the bottom of its warning banner container
Expected behavior
Warning banner content should neither flow out of its container nor get occluded by other warning banners.
Screenshots
Variant 1: screenshot of details view page at 400% zoom with 2 iframe messages overlapping with each other and the test requirement text
Variant 2: screenshot of Keyboard Navigation requirement at 100% zoom with 1 warning banner whose contents is spilling out of the banner container and overlapping the requirement title.
Context (please complete the following information)
- OS Name & Version: Windows Version 10.0.22621 Build 22621
- AI-Web Version & Environment: Canary Version 2023.2.2.1732
- Browser Version: Edge Version 109.0.1518.70 (Official build) (64-bit)
- Target Page: https://www.washington.edu/accesscomputing/AU/before.html
Are you willing to submit a PR?
Yes
Did you search for similar existing issues?
Yes
Additional context
During 2.37.2 validation we found that it's easier to trigger this bug than we originally thought - retitling and updating description accordingly