Fix zooming out and firefox iframe height issues

[aquaductape]

In Firefox, when you zoom out (not the browser page zoom) and the zoom percentage is less than 100%, the iframes have an extended "phantom" height, which overflows the main page and making it scrollable. Must a be a Firefox bug, because upon inspection, the iframe as well as their parent containers have no overflowing height. Tried overflow: hidden, which does fix main page overflowing, but causes iframes to translate upwards a little bit on the y axis and get clipped. The solution is CSS contain which enables isolating that element from the rest of document tree by limiting specific calculations, which in our case is contain: layout.

When focused in devtools iframe, then zooming out on mac device ⌘ + -, the keydown listeners preventing default behavior is ignored and browser zooms out page. This is due to chii library having a keydown listener that uses event capturing and stops its event propagating. The fix is simply changing our keydown listeners to use event capturing.

[milomg]

Is it possible this phantom height is because of inline-block shenanigans? If so, we should just use flexbox with relative positioning or vertical-align stuff instead of clipping

[aquaductape]

Is it possible this phantom height is because of inline-block shenanigans?

Inline-block wasn't the issue, already tested this in the past, and if it was, would've shown on all browsers, not just Firefox.

If so, we should just use flexbox with relative positioning or vertical-align stuff instead of clipping

contain: layout doesn't clip like overflow: hidden or overflow: clip, just tells browser that anything outside that element won't cause layout changes and won't calculate it.

But doesn't matter because changing the iframes to be absolute positioned to the flex children of the resizer grid is another alternative that fixes this issue, which is what the most recent change uses. So no need to use contain: layout.

  <div class="relative" style={`flex: ${1 - iframeHeight()};`}>
    <iframe
      title="Devtools"
      class="absolute inset-0 block h-full w-full"
      // ...
    />
  </div>