fix: Frame overflow bug at super small resolutions (#186)

seek-oss · Sep 14, 2020 · f027f50 · f027f50
1 parent 2b605a5
commit f027f50
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/Playroom/Frames/Frames.less b/src/Playroom/Frames/Frames.less
@@ -1,7 +1,5 @@
 @import (reference) '../variables.less';
 
-@frame-name-height: 30px;
-
 .root {
   box-sizing: border-box;
   width: 100%;
@@ -11,25 +9,31 @@
   white-space: nowrap;
   padding: @preview-padding 0 (@preview-padding - 10px);
   text-align: center;
+  display: flex;
 }
 
 .frameContainer {
   position: relative;
   height: 100%;
   text-align: left;
-  display: inline-flex;
-  flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column;
   margin-right: @preview-padding;
 
   &:first-child {
     margin-left: @preview-padding;
   }
 }
 
+.frame {
+  position: relative;
+  flex-grow: 1;
+}
+
 .frameBorder {
   position: absolute;
   top: 0;
-  bottom: @frame-name-height;
+  bottom: 0;
   left: 0;
   right: 0;
   box-shadow: @shadow-small;
@@ -42,6 +46,8 @@
 }
 
 .frameName {
+  @frame-name-height: 30px;
+
   flex: 0 0 @frame-name-height;
   height: @frame-name-height;
   transition: @transition-medium;

diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
@@ -39,7 +39,19 @@ export default function Frames({ code, themes, widths }: FramesProps) {
           key={`${frame.theme}_${frame.width}`}
           className={styles.frameContainer}
         >
-          <div className={styles.frameBorder} />
+          <div className={styles.frame}>
+            <div className={styles.frameBorder} />
+            <Iframe
+              intersectionRootRef={scrollingPanelRef}
+              src={frameSrc(
+                { themeName: frame.theme, code: renderCode },
+                playroomConfig
+              )}
+              className={styles.frame}
+              style={{ width: frame.width }}
+              data-testid="previewFrame"
+            />
+          </div>
           <div className={styles.frameName} data-testid="frameName">
             {frame.theme === '__PLAYROOM__NO_THEME__' ? (
               <Text weight="strong">
@@ -53,16 +65,6 @@ export default function Frames({ code, themes, widths }: FramesProps) {
               </Text>
             )}
           </div>
-          <Iframe
-            intersectionRootRef={scrollingPanelRef}
-            src={frameSrc(
-              { themeName: frame.theme, code: renderCode },
-              playroomConfig
-            )}
-            className={styles.frame}
-            style={{ width: frame.width }}
-            data-testid="previewFrame"
-          />
         </div>
       ))}
     </div>