MWPW-174568: [Preflight] Metadata on hover overlaps with navigation bar #4405
Conversation
libs/blocks/preflight/preflight.css
Outdated
| @@ -742,7 +742,7 @@ picture:has(.picture-meta) { | |||
| picture:hover .picture-meta, | |||
| img:hover ~ .picture-meta { | |||
| opacity: 1; | |||
| z-index: 19; | |||
| z-index: 9; | |||
There was a problem hiding this comment.
Gave it a quick check, seems like chart/list.css has a z-index of 10 for buttons? Ah our z-index strategy is a mess.
Further below in the file, we have a z-index of 103... should that be 9/10 as well?
There was a problem hiding this comment.
I honestly don't remember why I chose 19 as the initial value, I checked a few pages and the overlay still seems to show up correctly. I agree that there isn't a z-index strategy and it's all over the place 😞
QA should definitely test this on a more extensive list of pages to ensure the information is still being surfaced correctly.
There was a problem hiding this comment.
FYI: I made another change because @hit11757 noticed that the metadata still overlaps with the navigation on mobile so i lowered the z-index of .picture-meta to 3.
There was a problem hiding this comment.
Can you also change the z-index for the performance LCP modal?
libs/blocks/preflight/preflight.css
Outdated
| @@ -742,7 +742,7 @@ picture:has(.picture-meta) { | |||
| picture:hover .picture-meta, | |||
| img:hover ~ .picture-meta { | |||
| opacity: 1; | |||
| z-index: 19; | |||
| z-index: 9; | |||
There was a problem hiding this comment.
I honestly don't remember why I chose 19 as the initial value, I checked a few pages and the overlay still seems to show up correctly. I agree that there isn't a z-index strategy and it's all over the place 😞
QA should definitely test this on a more extensive list of pages to ensure the information is still being surfaced correctly.
There was a problem hiding this comment.
Validated. Testing details https://jira.corp.adobe.com/browse/MWPW-174568
Since the navigation bar had a
z-index: 10, i lowered thez-index:of the Metadata on hover so that it wouldnt show on top of the navigation bar when scrolling upResolves: MWPW-174568
Test URLs:
TEST Link: