Top nav bar doesn't adapt to smaller window sizes properly

Description

I've got an ultrawide screen, and typically split it into thirds to have multiple windows open at once.  This means my browser window is about 1120px wide.  The top nav bar does not properly adapt to various sizes below full screen at 1080p.

Window at 1120px:

Note: when horizontally scrolling, the nav bar's background doesn't extend past the original width of the window, making it impossible to see the additional menu items.

 

When shrinking the window further, the menu collapses, but doesn't work properly.

Menu closed:

Menu open:

Note that the menu doesn't display, and instead there's just some red characters overlayed that are not clickable.

 

Additionally, when on pages with the new Vue UI, the top nav bar does not scroll to the side, preventing access to any items that have overflown.

 

Acceptance / Success Criteria

None

Attachments

7

Activity

Show:

Scott Theleman March 5, 2024 at 7:10 PM

Still an issue. Will K. found this in Meridian 2023.1.13. Timestamp and search boxes overflow at 1080p resolution.

Edge:

Chrome:

Mark Mahacek November 13, 2022 at 11:37 PM

Upon further use from my phone, it looks like when the nav bar collapses to the menu button, it does render the menu, but it is white text in a transparent background, so it appears invisible.

Jeff Gehlbach November 10, 2022 at 4:10 PM

This issue may end up shaking out during the work to be done on .

Details

Assignee

Reporter

HB Grooming Date

HB Backlog Status

Components

Fix versions

Priority

PagerDuty

Created November 10, 2022 at 3:48 PM
Updated March 5, 2024 at 7:15 PM