Embedding HabPanel in MainUI

Apps & Services HABPanel
1

I’ve been working on embedding my HabPanel in a page on the main ui. I’ve mostly gotten it preforming well everywhere using the web-card:

                  default:
                    - component: oh-webframe-card
                      config:
                        height: calc(100vh - var(--f7-page-navbar-offset, 0px) -
                          var(--f7-page-toolbar-bottom-offset, 0px) -
                          var(--f7-card-content-padding-vertical, 0px) -
                          var(--f7-page-toolbar-top-offset, 0px) -
                          var(--f7-page-subnavbar-offset, 0px) -
                          var(--f7-page-searchbar-offset, 0px) -
                          var(--f7-page-content-extra-padding-top, 0px) -
                          var(--f7-safe-area-bottom, 0px) -
                          var(--f7-page-content-extra-padding-bottom, 0px))

But, I’m running into an issue that seems fairly common. Mobile browsers report 100vh as including browser interface objects, which is obnoxious. The only workarounds I have seen for this involve JS. Specifically, setting a css value to the window.innerHeight:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

But… we can’t run JS in the main UI. Anyone have any ideas on that? Is there something in Vue, or F7 that already exists that we could use to do something similar? (I didn’t see anything being set in the css.)

Thanks!