diff --git a/src/Playroom/Frames/Frames.less b/src/Playroom/Frames/Frames.less
index 79560e3c..6476d6fe 100644
--- 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,14 +9,15 @@
   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 {
@@ -26,10 +25,15 @@
   }
 }
 
+.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
index 30c05757..d4888d28 100644
--- 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>