Skip to content

Commit 2c67fc5

Browse files
authored
fix: fix css flex/height issues in safari (#248)
1 parent 458852a commit 2c67fc5

File tree

3 files changed

+14
-13
lines changed

3 files changed

+14
-13
lines changed

src/components/Layout.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ function Layout({
2626
/>
2727
</div>
2828

29-
<div className="px-8 mb-8 flex-grow flex-shrink relative">{children}</div>
29+
{/*not sure why, but safari needs a height here*/}
30+
<div className="px-8 mb-8 md:h-0 flex-grow flex-shrink relative">
31+
{children}
32+
</div>
3033

3134
<ToastContainer
3235
position="bottom-right"

src/components/Preview.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,15 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
8383

8484
return (
8585
<div className="w-full h-full flex flex-col relative">
86-
<div className="flex-auto relative">
87-
<iframe
88-
ref={refSetter}
89-
src="/sandbox.html"
90-
security="restricted"
91-
className="w-full h-full"
92-
scrolling="no"
93-
frameBorder="0"
94-
onLoad={handleLoadIframe}
95-
/>
96-
</div>
86+
<iframe
87+
ref={refSetter}
88+
src="/sandbox.html"
89+
security="restricted"
90+
className="flex-auto"
91+
scrolling="no"
92+
frameBorder="0"
93+
onLoad={handleLoadIframe}
94+
/>
9795

9896
{markup && variant !== 'minimal' && (
9997
<PreviewHint roles={roles} suggestion={suggestion} />

src/components/QueryEditor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function QueryEditor(props) {
2121
);
2222

2323
return (
24-
<div className="flex flex-col w-full h-full relative">
24+
<div className="flex flex-col w-full h-full">
2525
<Editor
2626
mode="javascript"
2727
initialValue={initialValue}

0 commit comments

Comments
 (0)