fix: fix css flex/height issues in safari (#248)

Author: bmeverett

src/components/Layout.js

@@ -26,7 +26,10 @@ function Layout({
         />
       </div>
 
-      <div className="px-8 mb-8 flex-grow flex-shrink relative">{children}</div>
+      {/*not sure why, but safari needs a height here*/}
+      <div className="px-8 mb-8 md:h-0 flex-grow flex-shrink relative">
+        {children}
+      </div>
 
       <ToastContainer
         position="bottom-right"

src/components/Preview.js

@@ -83,17 +83,15 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
 
   return (
     <div className="w-full h-full flex flex-col relative">
-      <div className="flex-auto relative">
-        <iframe
-          ref={refSetter}
-          src="/sandbox.html"
-          security="restricted"
-          className="w-full h-full"
-          scrolling="no"
-          frameBorder="0"
-          onLoad={handleLoadIframe}
-        />
-      </div>
+      <iframe
+        ref={refSetter}
+        src="/sandbox.html"
+        security="restricted"
+        className="flex-auto"
+        scrolling="no"
+        frameBorder="0"
+        onLoad={handleLoadIframe}
+      />
 
       {markup && variant !== 'minimal' && (
         <PreviewHint roles={roles} suggestion={suggestion} />

src/components/QueryEditor.js

@@ -21,7 +21,7 @@ function QueryEditor(props) {
   );
 
   return (
-    <div className="flex flex-col w-full h-full relative">
+    <div className="flex flex-col w-full h-full">
       <Editor
         mode="javascript"
         initialValue={initialValue}