Don't show grid resize handles on top of scene labels

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

@@ -40,7 +40,6 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
-  zeroRectangle,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -58,7 +57,6 @@ import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
-import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
 import CanvasActions from '../canvas-actions'
 import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
@@ -96,6 +94,7 @@ import {
   getGridRelatedIndexes,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
+import { SCENE_LABEL_HEIGHT } from './select-mode/scene-label'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -349,6 +348,7 @@ export interface GridResizingProps {
   axis: Axis
   gap: number | null
   padding: Sides | null
+  isScene: boolean
 }
 
 export const GridResizing = React.memo((props: GridResizingProps) => {
@@ -413,11 +413,14 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
       const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
       const dimensions = props.axisValues.dimensions
 
+      const maybeSceneTopOffset = props.isScene ? sceneTopOffset(canvasScale) : 0
+
       return (
         <div
           style={{
             position: 'absolute',
-            top: props.containingFrame.y - (props.axis === 'column' ? size : 0),
+            top:
+              props.containingFrame.y - (props.axis === 'column' ? size + maybeSceneTopOffset : 0),
             left: props.containingFrame.x - (props.axis === 'row' ? size : 0),
             width: props.axis === 'column' ? props.containingFrame.width : size,
             height: props.axis === 'row' ? props.containingFrame.height : size,
@@ -495,6 +498,7 @@ export type GridData = {
   columns: number
   cells: number
   metadata: ElementInstanceMetadata
+  isScene: boolean
 }
 
 export function useGridData(elementPaths: ElementPath[]): GridData[] {
@@ -554,6 +558,9 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
           rows: rows,
           columns: columns,
           cells: rows * columns,
+          isScene:
+            MetadataUtils.isProbablySceneFromMetadata(targetGridContainer) ||
+            MetadataUtils.isProbablyRemixSceneFromMetadata(targetGridContainer),
         }
       }, elementPaths)
     },
@@ -634,6 +641,7 @@ export const GridRowColumnResizingControls =
               gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+              isScene={grid.isScene}
             />
           )
         })}
@@ -648,6 +656,7 @@ export const GridRowColumnResizingControls =
               gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+              isScene={grid.isScene}
             />
           )
         })}
@@ -1848,3 +1857,8 @@ export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithP
     priority: 'bottom',
   }
 }
+
+function sceneTopOffset(canvasScale: number) {
+  const borderSkew = 5
+  return (SCENE_LABEL_HEIGHT + borderSkew) / canvasScale
+}

editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx

@@ -28,6 +28,7 @@ import { MultiplayerWrapper } from '../../../../utils/multiplayer-wrapper'
 import { getIdOfScene } from '../comment-mode/comment-mode-hooks'
 import { optionalMap } from '../../../../core/shared/optional-utils'
 import { defaultEither } from '../../../../core/shared/either'
+import { SCENE_LABEL_HEIGHT } from './scene-label'
 
 export const RemixSceneLabelPathTestId = (path: ElementPath): string =>
   `${EP.toString(path)}-remix-scene-label-path`
@@ -318,6 +319,7 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
           textOverflow: 'ellipsis',
           borderRadius: borderRadius,
           justifyContent: 'space-between',
+          height: SCENE_LABEL_HEIGHT / scale,
         }}
       >
         <FlexRow style={{ gap: paddingX }}>

editor/src/components/canvas/controls/select-mode/scene-label.tsx

@@ -20,6 +20,8 @@ import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isCommentMode, isSelectModeWithArea } from '../../../editor/editor-modes'
 import { getElementPathTreeChildren, getSubTree } from '../../../../core/shared/element-path-tree'
 
+export const SCENE_LABEL_HEIGHT = 28 //px
+
 interface SceneLabelControlProps {
   maybeHighlightOnHover: (target: ElementPath) => void
   maybeClearHighlightsOnHoverEnd: () => void
@@ -239,6 +241,7 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
             borderRadius: borderRadius,
             textOverflow: 'ellipsis',
             gap: 20,
+            height: SCENE_LABEL_HEIGHT / scale,
           }}
         >
           <div