Fix <InFrontOfTheCanvas/> (#4024)

This PR:
- fixes the placement of the InFrontOfTheCanvas component

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Fixed placement of the InFrontOfTheCanvas component.

packages/editor/editor.css

@@ -41,7 +41,6 @@
 	--layer-collaborator-cursor: 130;
 	--layer-grid: 150;
 	--layer-culled-shapes: 175;
-	--layer-canvas: 200;
 	--layer-shapes: 300;
 	--layer-overlays: 400;
 	--layer-in-front-overlay: 500;
@@ -257,7 +256,6 @@ input,
 	height: 100%;
 	width: 100%;
 	color: var(--color-text);
-	z-index: var(--layer-canvas);
 	cursor: var(--tl-cursor);
 	overflow: clip;
 	content-visibility: auto;
@@ -313,17 +311,6 @@ input,
 	pointer-events: none;
 }
 
-.tl-front {
-	z-index: var(--layer-in-front);
-	position: absolute;
-	inset: 0px;
-	height: 100%;
-	width: 100%;
-	overflow: clip;
-	content-visibility: auto;
-	touch-action: none;
-	pointer-events: none;
-}
 /* ------------------- Background ------------------- */
 
 .tl-background__wrapper {
@@ -1068,7 +1055,7 @@ input,
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: var(--layer-canvas);
+	z-index: 200;
 	font-size: 12px;
 	font-weight: 400;
 	color: var(--color-text-1);

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -125,6 +125,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	)
 
 	return (
+		<>
 			<div
 				ref={rCanvas}
 				draggable={false}
@@ -169,9 +170,17 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				</div>
 				<MovingCameraHitTestBlocker />
 			</div>
+			<InFrontOfTheCanvasWrapper />
+		</>
 	)
 }
 
+function InFrontOfTheCanvasWrapper() {
+	const { InFrontOfTheCanvas } = useEditorComponents()
+	if (!InFrontOfTheCanvas) return null
+	return <InFrontOfTheCanvas />
+}
+
 function GridWrapper() {
 	const editor = useEditor()
 	const gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -1,4 +1,4 @@
-import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'
+import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
@@ -87,21 +87,10 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 		<>
 			{children}
 			{hideUi ? null : <TldrawUiContent {...rest} />}
-			<InFrontOfTheCanvasWrapper />
 		</>
 	)
 })
 
-function InFrontOfTheCanvasWrapper() {
-	const { InFrontOfTheCanvas } = useEditorComponents()
-	if (!InFrontOfTheCanvas) return null
-	return (
-		<div className="tl-front">
-			<InFrontOfTheCanvas />
-		</div>
-	)
-}
-
 const TldrawUiContent = React.memo(function TldrawUI() {
 	const editor = useEditor()
 	const msg = useTranslation()