Hide crowded grid resize controls (#6430)

**Problem:**

Grid resize controls should be hidden when they get too crowded, for
example when zooming out.

<img width="299" alt="Screenshot 2024-09-30 at 17 32 08"
src="https://github.com/user-attachments/assets/13c8354d-1080-41d0-9cf5-9cc4f915dfbb">

**Fix:**

Hide the controls for an axis if any of the control areas would become
smaller than the control size.

Fixes #6429

editor/src/components/canvas/controls/grid-controls.tsx

@@ -405,12 +405,25 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     })
   }, [props.fromPropsAxisValues, resizingIndex])
 
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridResizing scale',
+  )
+
   if (props.axisValues == null) {
     return null
   }
   switch (props.axisValues.type) {
     case 'DIMENSIONS':
       const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
+      const dimensions = props.axisValues.dimensions
+
+      const hideControls = dimensions.some((dim) => {
+        const scaledSize = (dim.type === 'NUMBER' ? dim.value.value : 0) * scale
+        return scaledSize < GRID_RESIZE_HANDLE_SIZE
+      })
+
       return (
         <div
           style={{
@@ -422,11 +435,11 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
             display: 'grid',
             gridTemplateColumns:
               props.axis === 'column'
-                ? props.axisValues.dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
+                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
                 : undefined,
             gridTemplateRows:
               props.axis === 'row'
-                ? props.axisValues.dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
+                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
                 : undefined,
             gap: props.gap ?? 0,
             paddingLeft:
@@ -435,9 +448,10 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
+            visibility: hideControls ? 'hidden' : 'visible',
           }}
         >
-          {props.axisValues.dimensions.flatMap((dimension, dimensionIndex) => {
+          {dimensions.flatMap((dimension, dimensionIndex) => {
             return (
               <GridResizingControl
                 key={`grid-resizing-control-${dimensionIndex}`}
@@ -1552,15 +1566,15 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
     const element = useEditorState(
       Substores.metadata,
       (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
-      'GridResizeShadow element',
+      'GridResizeControls element',
     )
 
     const dispatch = useDispatch()
     const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
     const scale = useEditorState(
       Substores.canvas,
       (store) => store.editor.canvas.scale,
-      'GridResizingControl scale',
+      'GridResizeControls scale',
     )
 
     const resizeControlRef = useRefEditorState((store) =>