Fix zooming out and firefox iframe height issues (#171)

* fix Firefox issue when iframes are scaled down, they have phantom extended height, causing main page to show scrollbars

* fix zooming out defaulting to browser page zoom when focused on chii devtool

* revert unocss file

* changed iframe editors to absolute position

Author: aquaductape

packages/solid-repl/src/components/preview.tsx

@@ -16,7 +16,7 @@ const dispatchKeyboardEventToParentZoomState = () => `
     window.parent.document.dispatchEvent(keyboardEvent);
 
     e.preventDefault();
-  });
+  }, true);
 `;
 
 const generateHTML = (isDark: boolean, importMap: string) => `
@@ -301,10 +301,10 @@ export const Preview: Component<Props> = (props) => {
   });
   return (
     <div class="flex min-h-0 flex-1 flex-col" ref={outerContainer} classList={props.classList}>
-      <div class="min-h-0 min-w-0" style={`flex: ${props.devtools ? iframeHeight() : '1 1 100%'};`}>
+      <div class="relative" style={`flex: ${props.devtools ? iframeHeight() : '1 1 100%'};`}>
         <iframe
           title="Solid REPL"
-          class="dark:bg-other block h-full w-full overflow-scroll bg-white p-0"
+          class="dark:bg-other absolute inset-0 block h-full w-full overflow-scroll bg-white p-0"
           style={styleScale()}
           ref={iframe}
           src={iframeSrcUrl()}
@@ -328,10 +328,10 @@ export const Preview: Component<Props> = (props) => {
           }}
         />
       </Show>
-      <div class="min-h-0 min-w-0" style={`flex: ${1 - iframeHeight()};`}>
+      <div class="relative" style={`flex: ${1 - iframeHeight()};`}>
         <iframe
           title="Devtools"
-          class="h-full w-full"
+          class="absolute inset-0 block h-full w-full"
           style={styleScale()}
           ref={devtoolsIframe}
           src={devtoolsSrc}