Full size screenshot captures only 100vh part of the page, since .iui-layouts-page has strict height set

[irenajur]

Environment

• Package version(s): 0.1.2

Steps to reproduce

Noticed this while trying to get full page screenshot of https://developer.bentley.com homepage. I'm using Chrome for this, but there might be other full screen capturing tools used to reproduce this.

1. Open https://developer.bentley.com in Chrome browser
2. Open devtools
3. Press Ctrl+Shift+p
4. Select "Capture full size screenshot"

Actual behavior

Currently full size screenshot captures only 100vh page part of the page, since it's limited to 100vh.

While for pages that are not using iTwinUI-layout it captures full page. Changing "height" to "min-height" somewhat "fixes" that, but this impacts the sidenav badly, so this might require a deeper look.

.iui-layouts-page {
    min-height: 100vh; //height: 100vh; 
    display: grid;
    grid-template:
        "header header" auto
        "sidenav content" 1fr/auto 1fr;
}

[bentleyvk]

What a strange issue you found here 😀 Hm, it was intended that header and side bar are static and only content is scrollable, so I am not sure how to fix it, need to investigate more, maybe we could do something with :has when it will be supported. But I can't promise that this will be fixed soon.

[irenajur]

What a strange issue you found here 😀 Hm, it was intended that header and side bar are static and only content is scrollable, so I am not sure how to fix it, need to investigate more, maybe we could do something with :has when it will be supported. But I can't promise that this will be fixed soon.

It was more of a strange finding 😄 definitelly not something that breaks anything or requires a quick fix.