Fix viewport selection bug

packages/studio-ui/src/components/IFramePortal.tsx

@@ -1,16 +1,7 @@
 import { createPortal } from "react-dom";
-import {
-  Dispatch,
-  PropsWithChildren,
-  RefObject,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { Dispatch, PropsWithChildren, SetStateAction, useEffect } from "react";
 import useStudioStore from "../store/useStudioStore";
 import { twMerge } from "tailwind-merge";
-import { Viewport } from "./Viewport/defaults";
 
 export default function IFramePortal(
   props: PropsWithChildren<{
@@ -19,18 +10,13 @@ export default function IFramePortal(
     setIframeEl: Dispatch<SetStateAction<HTMLIFrameElement | null>>;
   }>
 ) {
-  const previewRef = useRef<HTMLDivElement>(null);
   const iframeDocument = props.iframeEl?.contentWindow?.document;
-  const [viewport] = useStudioStore((store) => [store.pagePreview.viewport]);
   useParentDocumentStyles(iframeDocument);
-  const iframeCSS = twMerge(
-    "mr-auto ml-auto",
-    viewport.css,
-    useCSS(viewport, previewRef)
-  );
+  const viewportCss = useStudioStore((store) => store.pagePreview.viewport.css);
+  const iframeCSS = twMerge("mr-auto ml-auto", viewportCss);
 
   return (
-    <div ref={previewRef} className="grow w-1/3 bg-white border-y-8">
+    <div className="grow w-1/3 bg-white border-y-8 overflow-x-scroll">
       <iframe
         id="iframe"
         title={props.title}
@@ -55,32 +41,3 @@ function useParentDocumentStyles(iframeDocument: Document | undefined) {
     }
   }, [iframeDocument]);
 }
-
-const useCSS = (viewport: Viewport, previewRef: RefObject<HTMLDivElement>) => {
-  const [css, setCss] = useState(
-    (viewport.styles?.width ?? 0) * (previewRef.current?.clientHeight ?? 0) >
-      (viewport.styles?.height ?? 0) * (previewRef.current?.clientWidth ?? 0)
-      ? " w-full "
-      : " h-full "
-  );
-  const handleResize = () => {
-    const tempCss =
-      (viewport.styles?.width ?? 0) * (previewRef.current?.clientHeight ?? 0) >
-      (viewport.styles?.height ?? 0) * (previewRef.current?.clientWidth ?? 0)
-        ? " w-full "
-        : " h-full ";
-    if (tempCss !== css) {
-      setCss(tempCss);
-    }
-  };
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(handleResize);
-    if (previewRef.current) {
-      resizeObserver.observe(previewRef.current);
-    }
-    return () => resizeObserver.disconnect();
-  });
-
-  return css;
-};

packages/studio-ui/src/components/Viewport/ViewportButton.tsx

@@ -7,10 +7,8 @@ export default function ViewportButton(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const handleClose = useCallback(() => setIsOpen(false), []);
-  useRootClose(containerRef, () => {
-    handleClose();
-  });
-  const handleClick = useCallback(() => setIsOpen(!isOpen), [isOpen]);
+  useRootClose(containerRef, handleClose);
+  const handleClick = useCallback(() => setIsOpen((isOpen) => !isOpen), []);
 
   return (
     <div ref={containerRef}>

packages/studio-ui/src/components/Viewport/ViewportMenu.tsx

@@ -47,7 +47,7 @@ export default function ViewportMenu({
 interface OptionProps {
   viewport: Viewport;
   isCurrentlySelected: boolean;
-  handleSelect: (viewport) => void;
+  handleSelect: (viewport: Viewport) => void;
 }
 
 function Option({ viewport, isCurrentlySelected, handleSelect }: OptionProps) {
@@ -56,19 +56,17 @@ function Option({ viewport, isCurrentlySelected, handleSelect }: OptionProps) {
     [handleSelect, viewport]
   );
   const { name, styles } = viewport;
-  const className = classNames(
-    "flex items-center gap-x-2 px-6 py-2 cursor-pointer w-full text-left",
-    {
-      "bg-gray-300": isCurrentlySelected,
-      "hover:bg-gray-100": !isCurrentlySelected,
-    }
-  );
+  const className = classNames("flex items-center gap-x-2 px-6 py-2 w-full", {
+    "bg-gray-300": isCurrentlySelected,
+    "hover:bg-gray-100": !isCurrentlySelected,
+  });
 
   return (
     <button
       className={className}
       onClick={onClick}
       aria-label={`Select ${name} Viewport`}
+      disabled={isCurrentlySelected}
     >
       <div className="flex flex-row gap-x-2 items-center">
         {name}

packages/studio-ui/src/components/Viewport/defaults.tsx

@@ -29,7 +29,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 375,
     },
     type: "mobile",
-    css: "aspect-[375/667]",
+    css: "w-[375px] h-[667px]",
   },
   iphone14: {
     name: "iPhone 14",
@@ -38,7 +38,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 390,
     },
     type: "mobile",
-    css: "aspect-[390/844]",
+    css: "w-[390px] h-[844px]",
   },
   galaxyzflip5folded: {
     name: "Galaxy Z Flip5 Folded",
@@ -47,7 +47,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 720,
     },
     type: "mobile",
-    css: "aspect-[720/748]",
+    css: "w-[720px] h-[748px]",
   },
   galaxyzflip5unfolded: {
     name: "Galaxy Z Flip5 Unfolded",
@@ -56,7 +56,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 720,
     },
     type: "mobile",
-    css: "aspect-[720/1760]",
+    css: "w-[720px] h-[1760px]",
   },
   pixel7: {
     name: "Pixel 7",
@@ -65,7 +65,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 360,
     },
     type: "mobile",
-    css: "aspect-[360/800]",
+    css: "w-[360px] h-[800px]",
   },
   pixelfoldfolded: {
     name: "Pixel Fold Folded",
@@ -74,7 +74,7 @@ export const VIEWPORTS: ViewportMap = {
       width: 372,
     },
     type: "mobile",
-    css: "aspect-[372/720]",
+    css: "w-[372px] h-[720px]",
   },
   pixelfoldunfolded: {
     name: "Pixel Fold Unfolded",
@@ -83,6 +83,6 @@ export const VIEWPORTS: ViewportMap = {
       width: 600,
     },
     type: "mobile",
-    css: "aspect-[600/720]",
+    css: "w-[600px] h-[720px]",
   },
 };

packages/studio-ui/tests/components/ViewportButton.test.tsx

@@ -23,6 +23,6 @@ it("can change viewport", async () => {
       width: 375,
     },
     type: "mobile",
-    css: "aspect-[375/667]",
+    css: "w-[375px] h-[667px]",
   });
 });