Finish measuring the root rather than the viewport

The move from media queries to `@container element-call` queries left a
few places still asking the viewport: the room header's compact size
and the lobby's footer placement went through `useMediaQuery`, the
lobby's video preview was `50vh` tall, the reaction picker was capped at
`100vw`, and the content insets and the gradient background were sized
from `100vw`/`100vh`. Embedded in a corner of a host's page, each of
those answered for the page rather than the corner.

`useRootSizeMatches` is `useMediaQuery` for the root element, built on
the same `observeElementSize$` the layout uses; the lengths become
container units. Container units resolve against the nearest query
container, and there are others in the tree (the spotlight layouts, the
media tiles), so base.css says when they may be used.

jsdom gives the body no size at all, which would have every such query
read as a tiny window; the test setup now gives it a desktop's, matching
what the media query mock already answered.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/vitest.setup.ts

@@ -55,13 +55,27 @@ window.matchMedia = global.matchMedia = (): MediaQueryList =>
 
 // jsdom does no layout and has no ResizeObserver. The call view observes the
 // size of its root element; this one reports nothing, so that element stays at
-// whatever size jsdom says it is (zero) unless a test says otherwise.
+// whatever size jsdom says it is unless a test says otherwise.
 window.ResizeObserver ??= class ResizeObserver {
   public observe(): void {}
   public unobserve(): void {}
   public disconnect(): void {}
 };
 
+// And what jsdom says is zero, for everything — which would have every size
+// query against Element Call's root (the body, with no provider) read as a tiny
+// window. Give the body the size of a typical desktop window instead, the same
+// answer the media query mock above gives. A test that wants another size
+// supplies a root element of its own.
+for (const [property, value] of [
+  ["clientWidth", 1024],
+  ["clientHeight", 768],
+] as const)
+  Object.defineProperty(document.body, property, {
+    get: () => value,
+    configurable: true,
+  });
+
 const storage: Record<string, string> = {};
 const localStoragePolyfill = {
   getItem(key: string) {