Style UI based on component size instead of window size (#2758)

Previously, our UI changed appearance based on your browser's **window
size**.
This PR makes it change appearance based on tldraw's **component size**
instead.

It makes the UI behave as we intend in small inline components.
See the **Inline component** example for a comparison of different
screen sizes.
See code comments for more info.

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Open the inline component example.
2. Gradually change the width of the browser window.
3. The UI of the components shouldn't change when you do this. 

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

### Release Notes

- Dev: Fixed the default tldraw UI not matching the size of the
component.

apps/examples/src/examples/inline/InlineExample.tsx

@@ -23,6 +23,7 @@ export default function InlineExample() {
 					gap: 12,
 				}}
 			>
+				<InlineEditor width={900} height={600} />
 				<InlineEditor width={700} height={500} />
 				<InlineEditor width={600} height={400} />
 				<InlineEditor width={500} height={300} />

packages/tldraw/src/lib/ui.css

@@ -264,6 +264,16 @@
 	opacity: 1;
 }
 
+.tlui-layout__mobile .tlui-button__tool {
+	height: 48px;
+	width: 44px;
+}
+
+.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
+	height: 16px;
+	width: 16px;
+}
+
 /* Help */
 
 .tlui-button__help {
@@ -333,26 +343,6 @@
 	text-align: center;
 }
 
-@media (max-width: 640px) {
-	.tlui-button__tool {
-		height: 48px;
-		width: 44px;
-	}
-
-	.tlui-button__tool > .tlui-icon {
-		height: 16px;
-		width: 16px;
-	}
-
-	.tlui-kbd {
-		visibility: hidden;
-	}
-
-	.tlui-menu__group .tlui-button__icon-left {
-		display: none;
-	}
-}
-
 /* --------------------- Layout --------------------- */
 
 .tlui-layout {
@@ -902,15 +892,13 @@
 	width: 40px;
 }
 
-@media (max-width: 640px) {
-	.tlui-toolbar__overflow {
-		width: 32px;
-		padding: 0px;
-	}
+.tlui-layout__mobile .tlui-toolbar__overflow {
+	width: 32px;
+	padding: 0px;
+}
 
-	.tlui-toolbar *[data-state='open']::after {
-		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
-	}
+.tlui-layout__mobile .tlui-toolbar *[data-state='open']::after {
+	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 }
 
 /* -------------------- Help Zone ------------------- */
@@ -1496,6 +1484,7 @@
 	touch-action: auto;
 }
 
+/* TODO: refactor shortcuts dialog to make it work in small inline components */
 @media (min-width: 475px) {
 	.tlui-shortcuts-dialog__body {
 		columns: 2;
@@ -1503,6 +1492,7 @@
 	}
 }
 
+/* TODO: refactor shortcuts dialog to make it work in small inline components */
 @media (min-width: 960px) {
 	.tlui-shortcuts-dialog__body {
 		columns: 3;

packages/tldraw/src/lib/ui/components/primitives/Kbd.tsx

@@ -1,3 +1,4 @@
+import { useBreakpoint } from '../../hooks/useBreakpoint'
 import { kbd } from './shared'
 
 /** @internal */
@@ -7,6 +8,8 @@ export interface KbdProps {
 
 /** @internal */
 export function Kbd({ children }: KbdProps) {
+	const breakpoint = useBreakpoint()
+	if (breakpoint < 4) return null
 	return (
 		<kbd className="tlui-kbd">
 			{kbd(children).map((k, i) => (