set initial width to the smallest mobile breakpoint, constraint the width resizing, unconstrained in preview

app/designer/designer.tsx

@@ -228,7 +228,7 @@ export const Designer = ({ config, project }: DesignerProps) => {
                 height: "100%",
                 minWidth,
               }}
-              style={{ width: canvasWidth || "100%" }}
+              style={{ width: canvasWidth }}
             />
           </Workspace>
           <Breadcrumbs publish={publish} />

app/designer/features/breakpoints/trigger-button.tsx

@@ -36,7 +36,7 @@ export const TriggerButton = forwardRef<
 >((props, ref) => {
   const [zoom] = useZoom();
   const [breakpoint] = useSelectedBreakpoint();
-  const [canvasWidth = 0] = useCanvasWidth();
+  const [canvasWidth] = useCanvasWidth();
   if (breakpoint === undefined) return null;
   const variant = willRender(breakpoint, canvasWidth) ? "contrast" : "gray";
 

app/designer/features/breakpoints/use-update-canvas-width.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import {
   useSelectedBreakpoint,
   useCanvasWidth,
@@ -8,7 +8,6 @@ import { minWidth } from "./width-setting";
 export const useUpdateCanvasWidth = () => {
   const [selectedBreakpoint] = useSelectedBreakpoint();
   const [canvasWidth, setCanvasWidth] = useCanvasWidth();
-  const initialCanvasWidthRef = useRef<number>();
 
   useEffect(() => {
     if (selectedBreakpoint === undefined) {
@@ -16,21 +15,27 @@ export const useUpdateCanvasWidth = () => {
     }
 
     if (selectedBreakpoint.minWidth === 0) {
-      setCanvasWidth(initialCanvasWidthRef.current);
+      setCanvasWidth(minWidth);
       return;
     }
 
     setCanvasWidth(Math.max(selectedBreakpoint.minWidth, minWidth));
   }, [selectedBreakpoint, setCanvasWidth]);
 
+  // Set the initial canvas width based on the selected breakpoint upper bound, which starts where the next breakpoint begins.
   return useCallback(
     (iframe: HTMLIFrameElement | null) => {
-      if (iframe === null || canvasWidth !== undefined) return;
-      initialCanvasWidthRef.current = Math.round(
-        iframe.getBoundingClientRect().width
-      );
-      setCanvasWidth(initialCanvasWidthRef.current);
+      // Once canvasWidth is set, it means we have already set the initial width.
+      if (
+        iframe === null ||
+        selectedBreakpoint === undefined ||
+        canvasWidth !== 0
+      ) {
+        return;
+      }
+
+      setCanvasWidth(minWidth);
     },
-    [canvasWidth, setCanvasWidth]
+    [canvasWidth, selectedBreakpoint, setCanvasWidth]
   );
 };

app/designer/features/breakpoints/width-setting.tsx

@@ -1,20 +1,60 @@
-import { useCanvasWidth } from "~/designer/shared/nano-values";
+import { useMemo } from "react";
+import {
+  useCanvasWidth,
+  useIsPreviewMode,
+  useSelectedBreakpoint,
+  useBreakpoints,
+} from "~/designer/shared/nano-values";
 import { Slider, Text, Flex } from "~/shared/design-system";
+import { sort } from "./sort";
 
-// Doesn't make sense to allow resizing the canvas lower than this.
-export const minWidth = 200;
+// Doesn't make sense to allow resizing the canvas lower/higher than this.
+export const minWidth = 360;
 export const maxWidth = 3000;
 
+/**
+ * Return the next breakpoint from the currently selected one, sorted by the `sort()`
+ */
+const useNextBreakpoint = () => {
+  const [selectedBreakpoint] = useSelectedBreakpoint();
+  const [breakpoints] = useBreakpoints();
+
+  const sortedBreakpoints = useMemo(() => sort(breakpoints), [breakpoints]);
+
+  return useMemo(() => {
+    if (selectedBreakpoint === undefined) return;
+    const index = sortedBreakpoints.indexOf(selectedBreakpoint);
+    if (index === -1) return undefined;
+    return sortedBreakpoints[index + 1];
+  }, [sortedBreakpoints, selectedBreakpoint]);
+};
+
 export const WidthSetting = () => {
-  const [value = 0, setValue] = useCanvasWidth();
+  const [value, setValue] = useCanvasWidth();
+  const [selectedBreakpoint] = useSelectedBreakpoint();
+  const nextBreakpoint = useNextBreakpoint();
+  const [isPreviewMode] = useIsPreviewMode();
+
+  if (selectedBreakpoint === undefined) return null;
+
+  // We want to enable unconstrained resizing in a preview mode
+  const min = isPreviewMode
+    ? minWidth
+    : Math.max(minWidth, selectedBreakpoint.minWidth);
+  const max = isPreviewMode
+    ? maxWidth
+    : Math.min(
+        maxWidth,
+        nextBreakpoint ? nextBreakpoint.minWidth - 1 : maxWidth
+      );
 
   return (
     <Flex css={{ px: "$5", py: "$1" }} gap="1" direction="column">
       <Text size="1">Canvas width</Text>
       <Flex gap="3" align="center">
         <Slider
-          min={minWidth}
-          max={maxWidth}
+          min={min}
+          max={max}
           defaultValue={[value]}
           onValueChange={([value]) => {
             setValue(value);

app/designer/features/style-panel/style-panel.tsx

@@ -33,8 +33,7 @@ export const StylePanel = ({
     currentStyle === undefined ||
     inheritedStyle === undefined ||
     selectedInstanceData === undefined ||
-    breakpoint === undefined ||
-    canvasWidth === undefined
+    breakpoint === undefined
   ) {
     return null;
   }

app/designer/shared/nano-values/index.ts

@@ -34,7 +34,7 @@ export const useBreakpoints = () => useValue(breakpointsContainer);
 const zoomContainer = createValueContainer<number>(100);
 export const useZoom = () => useValue(zoomContainer);
 
-const canvasWidthContainer = createValueContainer<number | undefined>();
+const canvasWidthContainer = createValueContainer<number>(0);
 export const useCanvasWidth = () => useValue(canvasWidthContainer);
 
 const syncStatusContainer = createValueContainer<SyncStatus>("idle");