Gray strip overlaps header in the token list

[cawabunga]

Bug Description Grayish strip overlaps header in the list of tokens, which disallows to close the list.

Steps to Reproduce

1. Click on token select
2. List is opened with grayish strip in the header

Expected Behavior I am not sure the purpose of the strip, but I suppose it should be placed on element of the active token.

Additional Context Codesandbox

Screenshot

[justinevedovato]

I'm having the same issue, I have a list of several tokens, and when I hover on them, the gray strip moves along. Hovering the 1st element will hide the closing button, hovering on the 2nd one hides the input field, and so on.

Not sure what's causing it, nothing's been changed in the style, except for the dark mode. But it happens also in light mode, just like the screenshot above.

Screenshots

[datnguyen-tech]

Has anyone been able to fix that? I'm having the same issue :((

[cawabunga]

Has anyone been able to fix that? I'm having the same issue :((

I had to do a quick fix. Wrap your uniswap widget with <div class="uniswap"> and add next css:

.uniswap [color='container'] > div > div:nth-child(3) {
  position: relative;
}

[justinevedovato]

Thanks for the fix!

[TrejGun]

same here

[beautyfree]

Same issue

looks like the reason is in this package https://github.com/Uniswap/widgets/blob/main/src/components/TokenSelect/TokenOptions.tsx#L229