From ef02a734540de3d10962b315d3835410b20c42df Mon Sep 17 00:00:00 2001
From: Jess Telford <jess+github@jes.st>
Date: Mon, 14 Sep 2020 15:47:17 +1000
Subject: [PATCH] fix: Correctly display widths specified in non-px units
 (#188)

---
 src/Playroom/Frames/Frames.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index d4888d28..5a06ffe6 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -21,7 +21,11 @@ export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
 
   const frames = flatMap(widths, (width) =>
-    themes.map((theme) => ({ theme, width }))
+    themes.map((theme) => ({
+      theme,
+      width,
+      widthName: `${width}${/\d$/.test(width.toString()) ? 'px' : ''}`,
+    }))
   );
 
   let renderCode = code;
@@ -54,14 +58,11 @@ export default function Frames({ code, themes, widths }: FramesProps) {
           </div>
           <div className={styles.frameName} data-testid="frameName">
             {frame.theme === '__PLAYROOM__NO_THEME__' ? (
-              <Text weight="strong">
-                {frame.width}
-                px
-              </Text>
+              <Text weight="strong">{frame.widthName}</Text>
             ) : (
               <Text>
                 <Strong>{frame.theme}</Strong>
-                {` \u2013 ${frame.width}px`}
+                {` \u2013 ${frame.widthName}`}
               </Text>
             )}
           </div>