Proper positioning of Tooltip in example of sidebar

[sanyogchangmai]

fixes #33748

Problem - The tooltip does not get aligned to the respective option in the sidebar instead it appeared at the top of the sidebar.

After Solving - The tooltip is properly positioned with the respective option present in the sidebar.

Changes made - removed min-height property from sidebars.css

[alpadev]

To elaborate on this fix a bit more. We use height: -webkit-fill-available on the body and min-height: -webkit-fill-available on every child element of that body (including the tooltip element). This causes the tooltip to grow to the height of the viewport thus popper is using wrong dimensions when it tries to position that tooltip.

While trying to figure out why we use height: -webkit-fill-available in addition to height: 100vh on the body, I found this article which suggests that there was a problem with that page on mobiles.

The snippet in that article is a bit different tho. Instead of setting height: -webkit-fill-available on the body they set it on the html element and use min-height for the body. I guess the intention behind using min-height rather than height is to make the body scrollable, while our body uses overflow-y: hidden to prevent this, so this makes sense I guess.

The thing is I'm not sure why it was moved one level down e.g.

Snippet	Us
html { height }	body { height }
body { min-height }	body > * { min-height }

I found that the page looks frankly different when applying height: -webkit-fill-availble to the html element.

body:

html:

[sanyogchangmai]

Someone please approve my pull request.

[mdo]

This PR doesn't fix the issue properly—it introduces more problems in mobile and other browsers. See #33859 for a (hopefully) more complete fix for the whole example.

[simevidas]

Have you considered this?

html, body, main {
    height: 100%; /* or min-height */
}

I don’t understand why -webkit-fill-available would be needed when height 100% makes the element cover the entire initial viewport just the same. It feels to me that somebody on Twitter mentioned -webkit-fill-available as a solution, and then a bunch of blogs wrote about it, and then many people started using it, but nobody thought to think if a simple 100% solves the problem (it does).