[fix] grid, other insets (#2858)

Fix the grid and other insets, a few CSS cleanups.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Turn on the grid.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixes a bug with the grid not appearing.

packages/editor/editor.css

@@ -90,6 +90,8 @@
 	/* own properties */
 	position: relative;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	overflow: clip;
 }
 
@@ -215,6 +217,8 @@ input,
 .tl-canvas {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	color: var(--color-text);
 	z-index: var(--layer-canvas);
 	cursor: var(--tl-cursor);
@@ -230,7 +234,12 @@ input,
 }
 
 .tl-overlays {
-	position: relative;
+	position: absolute;
+	inset: 0px;
+	height: 100%;
+	width: 100%;
+	contain: strict;
+	pointer-events: none;
 	z-index: var(--layer-overlays);
 }
 
@@ -250,26 +259,14 @@ input,
 	pointer-events: none;
 }
 
-.tl-positioned {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	transform-origin: top left;
-}
-
-.tl-fixed-layer {
-	position: absolute;
-	inset: 0px;
-	contain: strict;
-	pointer-events: none;
-}
-
 /* ------------------- Background ------------------- */
 
 .tl-background {
 	position: absolute;
 	background-color: var(--color-background);
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	z-index: var(--layer-background);
 }
 
@@ -278,6 +275,8 @@ input,
 .tl-grid {
 	position: absolute;
 	inset: 0px;
+	width: 100%;
+	height: 100%;
 	touch-action: none;
 	pointer-events: none;
 	z-index: var(--layer-grid);
@@ -340,6 +339,8 @@ input,
 .tl-svg-container {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	pointer-events: none;
 	stroke-linecap: round;
 	stroke-linejoin: round;
@@ -350,6 +351,8 @@ input,
 .tl-html-container {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	pointer-events: none;
 	stroke-linecap: round;
 	stroke-linejoin: round;
@@ -781,6 +784,8 @@ input,
 .tl-text-content {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	min-width: 1px;
 	min-height: 1px;
 	overflow: visible;
@@ -982,6 +987,8 @@ input,
 	line-height: inherit;
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	z-index: 10;
 }
 
@@ -1024,6 +1031,8 @@ input,
 .tl-text-label__inner > .tl-text-input {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	padding: 16px;
 	z-index: 4;
 }
@@ -1199,6 +1208,8 @@ input,
 	position: absolute;
 	z-index: 1;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	background-color: var(--color-background);
 	opacity: 0.28;
 }
@@ -1289,13 +1300,13 @@ input,
 
 .tl-frame-name-input {
 	position: absolute;
-	top: 0px;
-	left: 0px;
 	border: none;
 	background: none;
 	outline: none;
 	padding: var(--space-3) var(--space-3);
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	font-size: inherit;
 	font-family: inherit;
 	font-weight: inherit;
@@ -1371,6 +1382,8 @@ input,
 .tl-error-boundary__overlay {
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	z-index: 500;
 	background-color: var(--color-overlay);
 }
@@ -1385,6 +1398,8 @@ input,
 	pointer-events: none;
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	z-index: -1;
 }
 /* some browsers seem to have some weird interactions between stacking contexts
@@ -1395,6 +1410,8 @@ it from receiving any pointer events or affecting the cursor. */
 	display: block;
 	position: absolute;
 	inset: 0px;
+	height: 100%;
+	width: 100%;
 	z-index: 600;
 	pointer-events: all;
 }

packages/editor/src/lib/components/Canvas.tsx

@@ -97,8 +97,6 @@ export function Canvas({ className }: { className?: string }) {
 			data-testid="canvas"
 			{...events}
 		>
-			{Background && <Background />}
-			<GridWrapper />
 			<svg className="tl-svg-context">
 				<defs>
 					{shapeSvgDefs}
@@ -109,12 +107,15 @@ export function Canvas({ className }: { className?: string }) {
 					{SvgDefs && <SvgDefs />}
 				</defs>
 			</svg>
+			{Background && <Background />}
+			<GridWrapper />
+
 			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 				<OnTheCanvasWrapper />
 				<SelectionBackgroundWrapper />
 				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 			</div>
-			<div className="tl-fixed-layer tl-overlays">
+			<div className="tl-overlays">
 				<div ref={rHtmlLayer2} className="tl-html-layer">
 					{debugGeometry ? <GeometryDebuggingView /> : null}
 					<HandlesWrapper />

packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx

@@ -185,14 +185,11 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
 			textHandleHeight * zoom >= 4
 
 		return (
-			<svg
+			<svg className="tl-overlays__item tl-selection__fg" data-testid="selection-foreground">
-				className="tl-overlays__item tl-selection__fg tl-svg-context"
-				data-testid="selection-foreground"
-			>
 				<g ref={rSvg}>
 					{shouldDisplayBox && (
 						<rect
-							className={classNames('tl-selection__fg__outline')}
+							className="tl-selection__fg__outline"
 							width={toDomPrecision(width)}
 							height={toDomPrecision(height)}
 						/>