fixed height

concrete-utopia · Oct 7, 2024 · 74a7c44 · 74a7c44
1 parent d332f5c
commit 74a7c44
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -94,7 +94,7 @@ import {
   getGridRelatedIndexes,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
-import { SceneLabelTestID } from './select-mode/scene-label'
+import { SCENE_LABEL_HEIGHT } from './select-mode/scene-label'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1859,7 +1859,6 @@ export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithP
 }
 
 function sceneTopOffset(canvasScale: number) {
-  const labelHeight = document.getElementById(SceneLabelTestID)?.getBoundingClientRect().height ?? 0
   const borderSkew = 5
-  return (labelHeight + borderSkew) / canvasScale
+  return (SCENE_LABEL_HEIGHT + borderSkew) / canvasScale
 }
diff --git a/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx b/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 }}>

diff --git a/editor/src/components/canvas/controls/select-mode/scene-label.tsx b/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
@@ -220,7 +222,6 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
           onMouseDown={labelSelectable ? onMouseDown : NO_OP}
           onMouseMove={labelSelectable ? onMouseMove : NO_OP}
           data-testid={SceneLabelTestID}
-          id={SceneLabelTestID}
           className='roleComponentName'
           style={{
             pointerEvents: labelSelectable ? 'initial' : 'none',
@@ -240,6 +241,7 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
             borderRadius: borderRadius,
             textOverflow: 'ellipsis',
             gap: 20,
+            height: SCENE_LABEL_HEIGHT / scale,
           }}
         >
           <div