Extra width in the Fly.io apps dashboard.

Recently I start to use the services of Fly.io for a test drive to the whole Elixir deployment process and when I was about to change the password of the account I noticed that the tooltip for the user settings was displayed off the screen, the styles that are applied to the tooltip affect the layout since it is being hidden using the property visibility: hidden; which hides the element but doesn’t remove it from the layout like display: none; does. In addition, when placed in absolute position, this element is removed from the flow of the document, causing the width of the entire html document to shift to the right.

Thanks for sharing. May I ask what’s your normal viewport?

My screen resolution is 1920X1080, my browser resolution and viewport is 1519x764 but this happens no matter the view port.

image

With the absolute position removed from de tooltips the shift does not happened. A possible solution while keeping the absolute position, is to remove margins in the x axis an give a little space with the right property.

image

I’m troubleshooting this at the moment. Do you mind shooting over what browser and OS you’re on?

OS, Windows 10
image
Browser, Brave Browser.