top site widget menu gets hidden behind tiles on narrow windows

[LaurenWags]

Description

If your window is on the narrow side (mine is ~815px), the top site tiles widget menu (when expanded) gets hidden behind the tiles. This doesn't happen if the window is wider or on 1.7.x.

Steps to Reproduce

1. Have a narrow window (~815 px, but I'm not sure what the threshold is) with top site tiles.
2. Open widget menu for top site tiles.

Actual result:

Menu is hidden behind tiles when opened

Expected result:

menu should not be hidden, here it is on a wider window:

Reproduces how often:

easily

Brave version (brave://version info)

Brave	1.8.82 Chromium: 81.0.4044.113 (Official Build) dev (64-bit)
Revision	e3225dafb0475864a1812a374d73a92e391635ac-refs/branch-heads/4044@{#936}
OS	macOS Version 10.14.6 (Build 18G3020)

Version/Channel Information:

• Can you reproduce this issue with the current release? no, does not reproduce with 1.7.x
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the dev channel? yes
• Can you reproduce this issue with the nightly channel? unsure

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields?
• Does the issue resolve itself when disabling Brave Rewards?
• Is the issue reproducible on the latest version of Chrome?

Miscellaneous Information:

cc @rebron @brave/legacy_qa

for reference, this is 1.7.98 with a window ~815 px:

[LaurenWags]

cc @bsclifton @cezaraugusto - not sure if related to refactor done with #2971?

Actually, maybe it's related to #8883

[DanielKim1]

It seems to be related to #2971.

In the pull request for that issue (https://github.com/brave/brave-core/pull/4325/files), the z-index for the Tile component was set to 3, but the z-index for the top site widget menu is 1, so the tiles are displayed over the top site widget menu.

The change is on line 92 of components/brave_new_tab_ui/components/default/gridSites/index.ts (https://github.com/brave/brave-core/pull/4325/files#diff-dfaf035aea2304cb85816cd95b76c618R92).

Increasing the z-index of the top site widget menu to 4 should fix the issue, but I'm not sure where to find the code for that

[cezaraugusto]

Hi @LaurenWags it was caused by brave/brave-core#4910 and fixed by @ryanml in brave/brave-core#5297. Seems worth coordinating with him the uplift process for the fix.

[LaurenWags]

Missed #9267 when searching for an issue - thank you!

cc @rebron to determine if this is needed for 1.8.x.

[bsclifton]

Yup- I think we'll need to uplift brave/brave-core#5297 - let me go ahead and do that

[bsclifton]

Closing as duplicate of #9267