Reorder dom elements. (#3431)

We reorded the dom a bit when we added the web gl rendered culled
shapes. We can now revert that.

Also noticed we weren't positioning the wrapper, so the z-index didn't
not apply.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [x] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [x] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/editor/editor.css

@@ -289,16 +289,18 @@ input,
 
 .tl-background__wrapper {
 	z-index: var(--layer-background);
-}
-
-.tl-background {
 	position: absolute;
-	background-color: var(--color-background);
 	inset: 0px;
 	height: 100%;
 	width: 100%;
 }
 
+.tl-background {
+	background-color: var(--color-background);
+	width: 100%;
+	height: 100%;
+}
+
 /* --------------------- Grid Layer --------------------- */
 
 .tl-grid {

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

@@ -118,52 +118,50 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	])
 
 	return (
-		<>
+		<div
+			ref={rCanvas}
+			draggable={false}
+			className={classNames('tl-canvas', className)}
+			data-testid="canvas"
+			{...events}
+		>
+			<svg className="tl-svg-context">
+				<defs>
+					{shapeSvgDefs}
+					<CursorDef />
+					<CollaboratorHintDef />
+					{SvgDefs && <SvgDefs />}
+				</defs>
+			</svg>
 			{Background && (
 				<div className="tl-background__wrapper">
 					<Background />
 				</div>
 			)}
-			<div
-				ref={rCanvas}
-				draggable={false}
-				className={classNames('tl-canvas', className)}
-				data-testid="canvas"
-				{...events}
-			>
-				<svg className="tl-svg-context">
-					<defs>
-						{shapeSvgDefs}
-						<CursorDef />
-						<CollaboratorHintDef />
-						{SvgDefs && <SvgDefs />}
-					</defs>
-				</svg>
-				<GridWrapper />
-				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
-					<OnTheCanvasWrapper />
-					<SelectionBackgroundWrapper />
-					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
-				</div>
-				<div className="tl-overlays">
-					<div ref={rHtmlLayer2} className="tl-html-layer">
-						{debugGeometry ? <GeometryDebuggingView /> : null}
-						<HandlesWrapper />
-						<BrushWrapper />
-						<ScribbleWrapper />
-						<ZoomBrushWrapper />
-						<SelectedIdIndicators />
-						<HoveredShapeIndicator />
-						<HintedShapeIndicator />
-						<SnapIndicatorWrapper />
-						<SelectionForegroundWrapper />
-						<LiveCollaborators />
-					</div>
-					<InFrontOfTheCanvasWrapper />
-				</div>
-				<MovingCameraHitTestBlocker />
+			<GridWrapper />
+			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+				<OnTheCanvasWrapper />
+				<SelectionBackgroundWrapper />
+				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 			</div>
-		</>
+			<div className="tl-overlays">
+				<div ref={rHtmlLayer2} className="tl-html-layer">
+					{debugGeometry ? <GeometryDebuggingView /> : null}
+					<HandlesWrapper />
+					<BrushWrapper />
+					<ScribbleWrapper />
+					<ZoomBrushWrapper />
+					<SelectedIdIndicators />
+					<HoveredShapeIndicator />
+					<HintedShapeIndicator />
+					<SnapIndicatorWrapper />
+					<SelectionForegroundWrapper />
+					<LiveCollaborators />
+				</div>
+				<InFrontOfTheCanvasWrapper />
+			</div>
+			<MovingCameraHitTestBlocker />
+		</div>
 	)
 }