index.css

:root {
  --padding: 0;
}

html {
  overflow: hidden;
  height: var(--100vh, 100vh);
}

body {
  overflow: hidden;
  overscroll-behavior-y: none;
  display: grid;
  grid-template-areas:
    'navbar'
    'pages'
    'tabbar';
  grid-template-rows:
    auto /* navbar */
    1fr /* pages */
    auto; /* tabbar */
}

@supports (padding: max(1px)) {
  body {
    padding: max(var(--padding), env(safe-area-inset-top))
      max(var(--padding), env(safe-area-inset-right))
      max(var(--padding), env(safe-area-inset-bottom))
      max(var(--padding), env(safe-area-inset-left));
  }
}

iframe {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

#navbar,
#tabbar {
  user-select: none;
  overflow: hidden;
}

#navbar {
  height: calc(env(safe-area-inset-top) + 45pt);
}

#tabbar {
  height: calc(env(safe-area-inset-bottom) + 49pt);
}

#pages {
  display: flex;
  width: 100%;
  overflow: hidden;
}

#pages iframe {
  display: none;
  height: 100%;
}