render a hint when canvas is too small an the breakpoint doesn't apply

app/designer/features/breakpoints/breakpoints.tsx

@@ -17,13 +17,13 @@ import {
   useSelectedBreakpoint,
   useCanvasWidth,
 } from "../../shared/nano-values";
+import { willRender } from "~/designer/shared/breakpoints";
 import { BreakpointsEditor } from "./breakpoints-editor";
 import { Preview } from "./preview";
 import { ScaleSetting } from "./scale-setting";
 import { TriggerButton } from "./trigger-button";
 import { WidthSetting } from "./width-setting";
 import { useUpdateCanvasWidth } from "./use-update-canvas-width";
-import { willRender } from "./will-render";
 
 const BreakpointSelectorItem = ({ breakpoint }: { breakpoint: Breakpoint }) => {
   const [canvasWidth = 0] = useCanvasWidth();
@@ -98,8 +98,10 @@ export const Breakpoints = ({ publish }: BreakpointsProps) => {
         {isEditing === false && (
           <>
             <DropdownMenuSeparator />
-            <ScaleSetting />
-            <WidthSetting />
+            <form>
+              <ScaleSetting />
+              <WidthSetting />
+            </form>
             <DropdownMenuSeparator />
             <Preview breakpoint={breakpointPreview} />
           </>

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

@@ -5,6 +5,7 @@ import {
   useScale,
   useSelectedBreakpoint,
 } from "~/designer/shared/nano-values";
+import { willRender } from "~/designer/shared/breakpoints";
 import { Button, Text } from "~/shared/design-system";
 import {
   DesktopIcon,
@@ -13,7 +14,6 @@ import {
   TabletIcon,
   DevicesIcon,
 } from "~/shared/icons";
-import { willRender } from "./will-render";
 
 type TriggerButtonProps = ComponentProps<typeof Button>;
 

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

@@ -1,11 +1,16 @@
 import type { Publish } from "~/designer/shared/canvas-iframe";
-import { Box } from "~/shared/design-system";
+import { willRender } from "~/designer/shared/breakpoints";
+import { Box, Card, Paragraph } from "~/shared/design-system";
 import type { SelectedInstanceData } from "~/shared/component";
 import { useStyleData } from "./use-style-data";
 import { ComponentInfo } from "../../shared/inspector";
 import { VisualSettings } from "./settings";
 import { Search } from "./search";
 import { useState } from "react";
+import {
+  useCanvasWidth,
+  useSelectedBreakpoint,
+} from "~/designer/shared/nano-values";
 
 type StylePanelProps = {
   publish: Publish;
@@ -20,16 +25,35 @@ export const StylePanel = ({
     selectedInstanceData,
     publish,
   });
+  const [breakpoint] = useSelectedBreakpoint();
+  const [canvasWidth] = useCanvasWidth();
   const [search, setSearch] = useState("");
 
   if (
     currentStyle === undefined ||
     inheritedStyle === undefined ||
-    selectedInstanceData === undefined
+    selectedInstanceData === undefined ||
+    breakpoint === undefined ||
+    canvasWidth === undefined
   ) {
     return null;
   }
 
+  if (willRender(breakpoint, canvasWidth) === false) {
+    return (
+      <Box css={{ p: "$2" }}>
+        <Card css={{ p: "$3", mt: "$3" }}>
+          <Paragraph css={{ marginBottom: "$2" }}>
+            {`Please increase the canvas width.`}
+          </Paragraph>
+          <Paragraph>
+            {`"${breakpoint.label}" breakpoint minimum width is ${breakpoint.minWidth}px.`}
+          </Paragraph>
+        </Card>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Box css={{ p: "$2" }}>

app/designer/shared/breakpoints/index.ts

@@ -0,0 +1 @@
+export * from "./will-render";

app/shared/design-system/components/paragraph.tsx

@@ -23,7 +23,7 @@ export const Paragraph = React.forwardRef<
 
   // This is the mapping of Paragraph Variants to Text variants
   const textSize: Record<ParagraphSizeVariants, TextSizeVariants["size"]> = {
-    1: { "@initial": "3", "@bp2": "4" },
+    1: { "@initial": "2", "@bp2": "4" },
     2: { "@initial": "5", "@bp2": "6" },
   };