[UI] tc-dropdown-container goes off-screen on window size change

[arterialist]

TonConnectButton's dropdown goes off the screen on mobile and on desktop, if the window is resized. In my case the button is mounted inside the MUI's Toolbar, if that matters.

Steps to reproduce:

1. Add tonconnect button to the top-right part of the screen
2. Open developer tools and enable responsive view
3. Click on the TonConnect button

Alternatively, this can be achieved just by clicking on the button on the mobile device.

Demo video:

https://user-images.githubusercontent.com/37044735/215396425-2befc900-1e96-4bae-8f41-40874192ea87.mp4

[arterialist]

Updating @floating-ui/dom to 1.1.0 fixes this issue partially on desktop, but it's still present on mobile. I think it'll be worth bumping this dependency version to 1.1.0 in tonconnect/ui package.json as a partial workaround.

New behavior:

https://user-images.githubusercontent.com/37044735/215415340-56f02d89-72a9-4c33-bc31-4925f6e2bd04.mp4

[siandreev]

Hi @arterialist , everything seems to be working fine on the Demo Dapp with React UI

Could you provide more details about your app (repo link/code)?

[arterialist]

@siandreev I think I figured out what was the issue - if the z-index of the tc-dropdown-container is bigger than the button's container, then the bug appears. Can't provide the full code unfortunately, but here are the steps to possibly reproduce it:

1. create an empty react + nextjs project
2. install MUI
3. add the following component:

   <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
   <Toolbar>
   <Typography>Title</ Typography>
   <TonConnectButton />
   </ Toolbar>
   </AppBar>

4. apply the following style (1202 is 1 higher than the toolbar):

   #tc-dropdown-container {
   z-index: 1202 !important; 
   }

The issue can be resolved on my side though, but maybe it's worth looking at it's reasons (if you wish to ofc). You can close the issue if it's not a UI lib-related, I'll be checking things more thoroughly on my side next time.

[siandreev]

@arterialist thanks for your contribution. Actually it is not recommended to modify Ton Connect UI elements directly by id. It is better to set up them using tonConnectUI.uiOption (in @tonconnect/ui) or setOptions (in @tonconnect/ui-react)