Incorrect hoo-dlg sidebar height on mobile devices

[gabbsmo]

Describe the bug The hight of sidebar dialogs is too high in the case of browsers where the chrome overlays the viewport. This is very common on touch devices.

To Reproduce Steps to reproduce the behavior:

1. Create a .hoo-dlg.sidebar.right
2. Fill it up with content
3. The last content will be covered by the browser chrome at the bottom

Expected behavior Sidebar dialogs should have the same height as the visible viewport.

Smartphone (Android)

• Device: Samsung Galaxy S20
• OS: Android 13
• Browser: Samsung Internet
• Version: 25

Smartphone (Apple)

• Device: iPhone 15
• OS: iOS 17
• Browser: Safari

Additional context One recommendation is to use height: 100% together with position: fixed, rather than height: 100vh. See Chrome for Developers.

My workaround:

.hoo-dlg.sidebar {
    position: fixed;
    height: 100%;
}

[StfBauer]

100% most of the case is not reliant. I only had support in the dialogs for vw, vh.

I added now the more common and better useable viewport height and widht using svw and svh. Which will give you the smalles view port that matches the quasi "real browser" window.

[gabbsmo]

That looks cleaner indeed. Please let me know when it is on npm and I will see if I can remove my workaround. Thanks!

[StfBauer]

🛳️ Shipped in 2.5.0 - https://lab.n8d.studio/htwoo/changelog/htwoo-core-cl/

[gabbsmo]

In my scenario the sidebars are sometimes stacked on top of eachother and/or are scrollable. I find that postion: fixed; height: 100%; works better in my case.

1: Without postion: fixed, the scrollbar will push the content to towards the center of the viewport, on Windows for example. Different browsers have the scrollbars either overlapping or to the side. 2: Without postion: fixed; height: 100%;, overlaying sidebar may get less height than the one below when stacking them.