How to calculate CSS vh unit to match previous configuration defned with px?

Question

Recently, Wikimedia upgraded an HTML page layout used for editing, by changing the CSS units from px to vh.

The problem is that this HTML page also contains several fixed height text boxes [listed below], and now these are elongated and makes text editing impossible.

The values in the linked image, were based on my screen resolution of 1664 x 936 [16:9].

It's unknown to me which of the sizes in the linked image vh is based on.

https://en.wikisource.org/wiki/File:Resolution_and_inner_and_outer_windows_sizes.jpg

Is there a way to fix these textboxes position in this dynamic height setting?

edit space with blank blue areas which need to be eliminated

/* previously 300px - height of the text image window in the page edit view */

    .prp-page-image-openseadragon-horizontal {
        width:100% !important;
        max-height:calc(100vh - 636px);
        min-height:calc(100vh - 636px);
    }
    
    /* previously 60px - header and footer windows height  in edit view */
    #wpHeaderTextbox, #wpFooterTextbox {
        font-size:120% !important;
        max-height:calc(100vh - 876px;
        min-height:calc(100vh - 876px);
        color: #000 !important;
        background-color: #F5F5F5;
    }
    
    /* previously = 300px - main text area  in edit view */
    .mw-editform #wpTextbox1 {
        display:block !important;
        font-size:120% !important;
        max-height:calc(100vh - 636px);
        min-height:calc(100vh - 636px);
        color: #000 !important;
        background-color: #F5F5F5 !important;
    }