Contain all the things (#1999)

This PR adds some css containment where possible.

### Change Type

- [x] `patch` — minor

packages/editor/editor.css

@@ -289,6 +289,7 @@ input,
 	touch-action: none;
 	pointer-events: none;
 	z-index: 2;
+	contain: strict;
 }
 
 .tl-grid-dot {
@@ -310,6 +311,7 @@ input,
 
 .tl-brush {
 	stroke-width: calc(var(--tl-scale) * 1px);
+	contain: size layout;
 }
 
 .tl-brush__default {
@@ -323,6 +325,7 @@ input,
 	stroke-linejoin: round;
 	stroke-linecap: round;
 	pointer-events: none;
+	contain: size layout;
 }
 
 /* ---------------------- Shape --------------------- */
@@ -332,6 +335,7 @@ input,
 	pointer-events: none;
 	overflow: visible;
 	transform-origin: top left;
+	contain: size layout;
 }
 
 .tl-shape__culled {
@@ -436,6 +440,7 @@ input,
 	transform-origin: top left;
 	fill: none;
 	stroke-width: calc(1.5px * var(--tl-scale));
+	contain: size;
 }
 
 /* ------------------ SelectionBox ------------------ */
@@ -821,6 +826,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
+	contain: style paint;
 	-webkit-user-select: none;
 }
 

packages/tldraw/src/lib/ui.css

@@ -22,6 +22,7 @@
 	padding: var(--space-2);
 	pointer-events: none;
 	user-select: none;
+	contain: strict;
 	z-index: var(--layer-panels);
 	-webkit-transform: translate3d(0, 0, 0);
 	--sab: env(safe-area-inset-bottom);