2 issues with the sample source code

[PaTiTo MaSteR]

First off, thanks for the code!

To have the code working you should have viewport-fit=cover, if not will never work, for instance:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover" />

Secondly if you switch between portrait and landscape the code sample will not work (only the first time you load the page), this is the dynamic way:

@media screen and (orientation: portrait) {
	html[data-notch="true"] #main_row {
		height: 100px;
	}
}

@media screen and (orientation: landscape) {
	html[data-notch="true"] #main_row {
		padding-left: 44px;
		padding-right: 44px;
	}
}

Thanks!

[John Doherty]

Thanks for the feedback, it makes more sense to use the native orientation css property. I'll remove the one this script adds and add your example to the docs