bump compound web

use compound web sticky patch
rop the device list's custom fade under the mete
2026-11-01 00:32:28 +00:00 · 2026-10-29 13:11:44 +01:00 · 2026-10-28 19:29:08 +01:00 · 2026-10-28 16:33:31 +01:00 · 2026-10-28 16:27:38 +01:00 · 2026-10-28 16:11:49 +01:00
37 changed files with 549 additions and 941 deletions
@@ -109,4 +109,12 @@ describe("scopeStylesToRoot", () => {
      ".a .b_abc12:hover { border: 0 }",
    );
  });
+
+  it("leaves an excluded stylesheet as it is", async () => {
+    const css = "body { margin: 0 } .menu { color: red }";
+    const result = await postcss([
+      scopeStylesToRoot({ exclude: [/host\.css$/] }),
+    ]).process(css, { from: "/app/host.css" });
+    expect(result.css).toBe(css);
+  });
 });
@@ -60,12 +60,18 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
 * tokens, the component styles, the fonts — is not in this build at all: the
 * host supplies it, unscoped, along with its copy of Compound.
 */
-export function scopeStylesToRoot(): Plugin {
+interface Options {
+  /** Stylesheets left as they are: a host's own, which it doesn't scope. */
+  exclude?: RegExp[];
+}
+
+export function scopeStylesToRoot({ exclude = [] }: Options = {}): Plugin {
  return {
    postcssPlugin: "element-call-scope-styles-to-root",
    Once(root) {
-      const isModule =
-        root.source?.input.file?.endsWith(".module.css") ?? false;
+      const file = root.source?.input.file ?? "";
+      if (exclude.some((pattern) => pattern.test(file))) return;
+      const isModule = file.endsWith(".module.css");
      root.walkRules((rule) => {
        if (isRelative(rule)) return;
        rule.selector = (isModule ? scopeBare : scopeAll).processSync(
@@ -19,7 +19,7 @@ services:
      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
  element-web:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:b2a5a30afb4f583a7560448b005d8332bee29672f15826e4a995b393058f0291
+    image: ghcr.io/element-hq/element-web:develop@sha256:79e47d8d5a93848403cb83042a405d8ed233a7727c499fa53b4b39a80f090be4
  element-web-1:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:b2a5a30afb4f583a7560448b005d8332bee29672f15826e4a995b393058f0291
+    image: ghcr.io/element-hq/element-web:develop@sha256:79e47d8d5a93848403cb83042a405d8ed233a7727c499fa53b4b39a80f090be4
@@ -88,7 +88,7 @@
    "@typescript-eslint/utils": "^8.61.0",
    "@use-gesture/react": "^10.2.11",
    "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.4.0",
+    "@vector-im/compound-web": "github:element-hq/compound-web#a75cf8aa1dbd2eaf2659069a89dac47f495ad004",
    "@vitejs/plugin-react": "^6.0.2",
    "@vitest/browser-playwright": "^4.1.5",
    "@vitest/coverage-v8": "^4.0.18",
@@ -125,25 +125,24 @@ test("leaves the host's own page unstyled", async ({ page }) => {
    timeout: 60_000,
  });

-  // Element Call's stylesheet is written for a page of its own: normalize.css
-  // gives `html` a line height, Compound gives `body` its font and feature
-  // settings, and the design tokens live on `:root`. None of that may reach the
-  // host's document — the harness sets none of these itself, so anything other
-  // than the browser's defaults here came from us.
+  // Element Call's page-wide CSS (normalize.css and the tokens in base.css)
+  // should not reach the host's page. Compound CSS that gets loaded to EW (host)
+  // on the other hand should impact the host. So probe with styles only Element Call sets:
+  // - A fresh <sub> keeps the browser's `vertical-align: sub` unless
+  //   normalize.css leaked; it turns that into `baseline`.
+  // - `--font-scale` is Element Call's own token, so `:root` must not have it.
  const host = await page.evaluate(() => {
-    const html = getComputedStyle(document.documentElement);
-    const body = getComputedStyle(document.body);
+    const sub = document.body.appendChild(document.createElement("sub"));
+    const verticalAlign = getComputedStyle(sub).verticalAlign;
+    sub.remove();
    return {
-      lineHeight: html.lineHeight,
-      fontFeatureSettings: body.fontFeatureSettings,
-      token: html.getPropertyValue("--cpd-color-text-primary"),
+      verticalAlign,
+      token: getComputedStyle(document.documentElement).getPropertyValue(
+        "--font-scale",
+      ),
    };
  });
-  expect(host).toEqual({
-    lineHeight: "normal",
-    fontFeatureSettings: "normal",
-    token: "",
-  });
+  expect(host).toEqual({ verticalAlign: "sub", token: "" });

  // While inside the container, the same rules do apply
  const root = panes.first().locator("[data-element-call-root]");
@@ -159,7 +159,7 @@ export class TestHelpers {
  public static async dismissStartupToasts(page: Page): Promise<void> {
    const expectedToasts = [
      { title: "Failed to load service worker", button: "OK" },
-      { title: "Back up your chats", button: "Dismiss" },
+      { title: "Back up your chats", button: "Not now" },
      { title: "Turn on key storage", button: "Dismiss" },
      { title: "Element does not support this browser", button: "Dismiss" },
    ];
@@ -178,7 +178,11 @@ export class TestHelpers {
        );

        if (toastConfig) {
-          await toast.getByRole("button", { name: toastConfig.button }).click();
+          // Bounded so that a renamed button leaves the toast in place and the
+          // next step reports it, instead of hanging until the test timeout.
+          await toast
+            .getByRole("button", { name: toastConfig.button })
+            .click({ timeout: 5000 });
        } else {
          // Unknown toast. We don't want to act on unknown toasts
          break;
@@ -134,8 +134,8 @@ importers:
        specifier: ^11.0.0
        version: 11.3.1(@types/react@19.2.18)(react@19.2.8)
      '@vector-im/compound-web':
-        specifier: ^10.4.0
-        version: 10.4.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.3.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        specifier: github:element-hq/compound-web#a75cf8aa1dbd2eaf2659069a89dac47f495ad004
+        version: https://codeload.github.com/element-hq/compound-web/tar.gz/a75cf8aa1dbd2eaf2659069a89dac47f495ad004(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.3.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@vitejs/plugin-react':
        specifier: ^6.0.2
        version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.15)(vite@8.2.4(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.4(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -408,10 +408,6 @@ packages:
    resolution: {integrity: sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ==}
    engines: {node: '>=6.9.0'}

-  '@babel/traverse@7.29.8':
-    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/types@7.29.11':
    resolution: {integrity: sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ==}
    engines: {node: '>=6.9.0'}
@@ -3314,8 +3310,9 @@ packages:
      react:
        optional: true

-  '@vector-im/compound-web@10.4.0':
-    resolution: {integrity: sha512-Tt5hsNK7ulhGdRuy9lzSm5C+T8M/4O4kLDFLkaU+Hi1kVWj6tj/5awW+U+GvtpWRh5llbHN2HRCh79+gQhek+A==}
+  '@vector-im/compound-web@https://codeload.github.com/element-hq/compound-web/tar.gz/a75cf8aa1dbd2eaf2659069a89dac47f495ad004':
+    resolution: {gitHosted: true, integrity: sha512-KnG6/GTdMfBPfLf8u5HGBtBESJ0QpXB6WBFlDFR/zOHjh8V7f8tY0LXyIlNGIBK2Gz50PQGRauP1z/nPyjnyNA==, tarball: https://codeload.github.com/element-hq/compound-web/tar.gz/a75cf8aa1dbd2eaf2659069a89dac47f495ad004}
+    version: 10.4.0
    peerDependencies:
      '@fontsource/inconsolata': ^5
      '@fontsource/inter': ^5
@@ -3421,11 +3418,6 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

-  acorn@8.18.0:
-    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
  acorn@8.19.0:
    resolution: {integrity: sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==}
    engines: {node: '>=0.4.0'}
@@ -6357,10 +6349,10 @@ snapshots:
      '@babel/helper-compilation-targets': 7.29.7
      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
      '@babel/helpers': 7.29.7
-      '@babel/parser': 7.29.8
+      '@babel/parser': 7.29.11
      '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
-      '@babel/types': 7.29.8
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
+      '@babel/types': 7.29.11
      '@jridgewell/remapping': 2.3.5
      convert-source-map: 2.0.0
      debug: 4.4.3(supports-color@7.2.0)
@@ -6372,8 +6364,8 @@ snapshots:

  '@babel/generator@7.29.8':
    dependencies:
-      '@babel/parser': 7.29.8
-      '@babel/types': 7.29.8
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
      '@jridgewell/gen-mapping': 0.3.13
      '@jridgewell/trace-mapping': 0.3.31
      jsesc: 3.1.0
@@ -6390,8 +6382,8 @@ snapshots:

  '@babel/helper-module-imports@7.29.7(supports-color@7.2.0)':
    dependencies:
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
-      '@babel/types': 7.29.8
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
+      '@babel/types': 7.29.11
    transitivePeerDependencies:
      - supports-color

@@ -6400,7 +6392,7 @@ snapshots:
      '@babel/core': 7.29.7(supports-color@7.2.0)
      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
      '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
    transitivePeerDependencies:
      - supports-color

@@ -6417,7 +6409,7 @@ snapshots:
  '@babel/helpers@7.29.7':
    dependencies:
      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
+      '@babel/types': 7.29.11

  '@babel/parser@7.29.11':
    dependencies:
@@ -6438,8 +6430,8 @@ snapshots:
  '@babel/template@7.29.7':
    dependencies:
      '@babel/code-frame': 7.29.7
-      '@babel/parser': 7.29.8
-      '@babel/types': 7.29.8
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11

  '@babel/traverse@7.29.10(supports-color@7.2.0)':
    dependencies:
@@ -6448,19 +6440,7 @@ snapshots:
      '@babel/helper-globals': 7.29.7
      '@babel/parser': 7.29.11
      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
-      debug: 4.4.3(supports-color@7.2.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/traverse@7.29.8(supports-color@7.2.0)':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.8
-      '@babel/helper-globals': 7.29.7
-      '@babel/parser': 7.29.8
-      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
+      '@babel/types': 7.29.11
      debug: 4.4.3(supports-color@7.2.0)
    transitivePeerDependencies:
      - supports-color
@@ -8903,7 +8883,7 @@ snapshots:
      '@types/react': 19.2.18
      react: 19.2.8

-  '@vector-im/compound-web@10.4.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.3.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@https://codeload.github.com/element-hq/compound-web/tar.gz/a75cf8aa1dbd2eaf2659069a89dac47f495ad004(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.3.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
    dependencies:
      '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9055,14 +9035,12 @@ snapshots:

  '@webcontainer/env@1.1.1': {}

-  acorn-jsx@5.3.2(acorn@8.18.0):
+  acorn-jsx@5.3.2(acorn@8.19.0):
    dependencies:
-      acorn: 8.18.0
+      acorn: 8.19.0

  acorn@8.16.0: {}

-  acorn@8.18.0: {}
-
  acorn@8.19.0: {}

  agent-base@6.0.2(supports-color@7.2.0):
@@ -9733,8 +9711,8 @@ snapshots:

  espree@9.6.1:
    dependencies:
-      acorn: 8.18.0
-      acorn-jsx: 5.3.2(acorn@8.18.0)
+      acorn: 8.19.0
+      acorn-jsx: 5.3.2(acorn@8.19.0)
      eslint-visitor-keys: 3.4.3

  esprima@4.0.1: {}
@@ -11701,7 +11679,7 @@ snapshots:
  terser@5.46.1:
    dependencies:
      '@jridgewell/source-map': 0.3.11
-      acorn: 8.18.0
+      acorn: 8.19.0
      commander: 2.20.3
      source-map-support: 0.5.21

@@ -14,6 +14,7 @@ allowBuilds:
  "core-js": true
  "esbuild": true
  "matrix-js-sdk@git+https://github.com/matrix-org/matrix-js-sdk.git": true
+  "@vector-im/compound-web@git+https://github.com/element-hq/compound-web.git": true
  "protobufjs": true
 overrides:
  # We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but
@@ -7,6 +7,7 @@
  padding-top: env(safe-area-inset-top);
  opacity: 1;
  transition: opacity 0.15s;
+  text-align: center;
 }

 /* Pseudo-element for the gradient background */
@@ -52,7 +53,7 @@
    ". . ."
    "primaryButton title secondaryButton"
    ". . .";
-  place-items: center;
+  place-items: center stretch;
  column-gap: var(--cpd-space-2x);
 }

@@ -6,11 +6,12 @@ Please see LICENSE in the repository root for full details.
 */

 import { describe, expect, it, vi } from "vitest";
+import { BehaviorSubject } from "rxjs";

 import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
 import { constant } from "../state/Behavior";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
-import type { Layout } from "../state/layout-types";
+import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
@@ -64,6 +65,10 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
 const gridLayout: Layout = {
  type: "grid",
  grid: [],
+  spotlightAlignment$: new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  }),
  setVisibleTiles: (_: number) => {},
 };

@@ -36,20 +36,15 @@ Please see LICENSE in the repository root for full details.
  }
 }

+/* The width design sets: a long device name wraps. */
 .menu {
-  display: flex;
-  flex-direction: column;
+  inline-size: 296px;
 }

-/* Only the device lists scroll, bounded by the measured call area: the menu is
-   portalled out of the root, so CSS can't size it against the call. */
+/* Its share of the measured call area: the menu is portalled out of the root,
+   so CSS can't size it against the call. */
 .deviceList {
-  overflow-y: auto;
-  min-block-size: 0;
  max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
-  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
-    var(--device-list-scroll-padding-end, 0);
 }

 /* Compound's heading rule heads each section; the design adds space below it. */
@@ -62,25 +57,6 @@ Please see LICENSE in the repository root for full details.
  margin-block-start: var(--cpd-space-7x);
 }

-/* Sticky within its own section. Opaque and inset a border width so it doesn't
-   paint over the menu's outline. */
-.sectionHeading {
-  position: sticky;
-  inset-block-start: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-start: var(--cpd-border-width-1);
-}
-
-/* Sticky at the foot of the microphone section; opaque and inset as above. */
-.stickyMeter {
-  position: sticky;
-  inset-block-end: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-end: var(--cpd-border-width-1);
-}
-
 /* Radix focuses whatever the pointer is over, so the browser's ring would
   follow the mouse. Replaced by one shown only for keyboard focus. */
 .menu [role^="menuitem"]:focus,
@@ -65,8 +65,10 @@ const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
    <div
      ref={setCallArea}
      style={{
-        // A call's size: anything smaller makes a short device list scroll.
+        // A call's size: anything smaller makes a short device list scroll, and
+        // a narrower one narrows the menu.
        blockSize: 720,
+        inlineSize: 1024,
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "center",
@@ -97,6 +99,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

+// By place: Compound's section heading is aria-hidden, as its group carries
+// the name.
+const SECTION_HEADING = "[role='group'] > [aria-hidden]";
+
 export const Default: Story = {
  args: {
    iconsAndLabels: "audio",
@@ -219,9 +225,8 @@ export const SpeakerAndMicrophoneSections: Story = {
    await expect(
      document.body.querySelectorAll("[role='separator']"),
    ).toHaveLength(0);
-    const headings = document.body.querySelectorAll<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    );
+    const headings =
+      document.body.querySelectorAll<HTMLElement>(SECTION_HEADING);
    await expect(headings).toHaveLength(2);
    const frame = menu.getBoundingClientRect();
    for (const heading of headings) {
@@ -256,6 +261,37 @@ export const SpeakerAndMicrophoneSections: Story = {
  },
 };

+/** A long name wraps rather than widening the menu, which design sets. */
+export const LongDeviceNameWraps: Story = {
+  args: {
+    ...SpeakerAndMicrophoneSections.args,
+    outputOptions: [
+      {
+        label: {
+          type: "name",
+          name: "Logitech BRIO 4K Ultra HD Pro Business Webcam Speakers (046d:085e)",
+        },
+        id: "long",
+      },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "long",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const body = within(document.body);
+    const long = await body.findByRole("menuitemradio", { name: /Logitech/ });
+    const short = await body.findByRole("menuitemradio", { name: "Headset" });
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(Math.round(menu.getBoundingClientRect().width)).toBe(296);
+    await expect(long.getBoundingClientRect().height).toBeGreaterThan(
+      short.getBoundingClientRect().height,
+    );
+  },
+};
+
 export const OutputCannotBeChosen: Story = {
  args: {
    ...Default.args,
@@ -402,14 +438,14 @@ export const ManyDevices: Story = {
    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
    const menu = within(document.body);

-    // The sticky wrapper rather than the meter: without a fake microphone (as on
+    // The meter's box rather than its level: without a fake microphone (as on
    // WebKit) the meter shows a message instead of a level.
    const list = document.body.querySelector<HTMLElement>(
      `.${styles.deviceList}`,
    )!;
    const sticky = await waitFor(() => {
      const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
+        `.${meterStyles.meter}`,
      );
      if (element === null) throw new Error("the meter has not rendered yet");
      return element;
@@ -436,10 +472,6 @@ export const ManyDevices: Story = {
      .getBoundingClientRect();
    await expect(frame.top).toBeGreaterThanOrEqual(0);
    await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
-
-    // The meter is the menu's one opaque part, so it must stay inside the frame.
-    await expect(pinned.left).toBeGreaterThan(frame.left);
-    await expect(pinned.right).toBeLessThan(frame.right);
  },
 };

@@ -536,7 +568,7 @@ export const KeyboardReachesEveryDevice: Story = {

    const meter = await waitFor(() => {
      const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
+        `.${meterStyles.meter}`,
      );
      if (element === null) throw new Error("the meter has not rendered yet");
      return element;
@@ -545,9 +577,7 @@ export const KeyboardReachesEveryDevice: Story = {
    // Drawn over the list: the sticky headings and the meter.
    const overlays = [
      meter,
-      ...document.body.querySelectorAll<HTMLElement>(
-        `.${styles.sectionHeading}`,
-      ),
+      ...document.body.querySelectorAll<HTMLElement>(SECTION_HEADING),
    ];
    const items = within(document.body).getAllByRole("menuitemradio");

@@ -591,10 +621,7 @@ export const HeadingsStayWhileScrolling: Story = {
      `.${styles.deviceList}`,
    )!;
    const group = await menu.findByRole("group", { name: "Microphone" });
-    // By class: the heading is aria-hidden, and its group carries the name.
-    const heading = group.querySelector<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    )!;
+    const heading = group.querySelector<HTMLElement>(":scope > [aria-hidden]")!;

    // Far enough that the heading is only on screen if it is stuck there.
    list.scrollTop +=
@@ -607,13 +634,6 @@ export const HeadingsStayWhileScrolling: Story = {
    await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
      scrollport.top,
    );
-    // Clear of the menu's frame.
-    const frame = document.body
-      .querySelector("[role='menu']")!
-      .getBoundingClientRect();
-    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
-      frame.left,
-    );
  },
 };

@@ -17,7 +17,8 @@ import {
  Button,
  Menu,
  MenuItem,
-  MenuTitle,
+  MenuScrollArea,
+  MenuScrollSection,
  RadioInput,
  ToggleMenuItem,
 } from "@vector-im/compound-web";
@@ -84,6 +85,9 @@ const LIST_SHARE_OF_CALL = 0.6;
 /** Smallest device list height in px, so a short call still shows more than one device. */
 const MIN_LIST_HEIGHT = 160;

+/** Space kept between the menu and the call area's sides. */
+const MENU_MARGIN = 16;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
  enabled,
  busy,
@@ -157,18 +161,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
    return (): void => subscription.unsubscribe();
  }, [menuOpen, rootElement]);

-  // Kept clear at the list's foot, so a row reached by keyboard isn't under
-  // the meter.
-  const [meterHeight, meter] = useMeasuredHeight();
-
-  // Likewise at its head, for the sticky headings.
-  const [headingHeight, heading] = useMeasuredHeight();
-
  useEffect(() => {
    if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
  }, [menuOpen, devices]);

-  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const audioMeter = iconsAndLabels === "audio" && (
+    <LiveMicrophoneLevelMeter
+      deviceId={selectedOption}
+      // Only while open, so the microphone isn't held all call.
+      active={menuOpen}
+    />
+  );
+  const MuteButton = audioMeter ? MicButton : VideoButton;
  const button = (
    <MuteButton
      enabled={enabled ?? false}
@@ -179,9 +183,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
        e.stopPropagation();
      }}
      disabled={isBusy || onMuteClick === undefined}
-      data-testid={
-        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
-      }
+      data-testid={audioMeter ? "incall_mute" : "incall_videomute"}
    />
  );

@@ -326,6 +328,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
        open={menuOpen}
        onOpenChange={onOpenChange}
        side="top"
+        collisionBoundary={rootElement}
+        collisionPadding={MENU_MARGIN}
        trigger={
          <Button
            iconOnly
@@ -340,66 +344,41 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
          />
        }
      >
-        <div
+        <MenuScrollArea
          ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
-          role="none"
          className={styles.deviceList}
          data-testid="device-list"
          style={
            {
              "--device-list-max-height":
                listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              "--device-list-scroll-padding-end":
-                meterHeight === undefined ? undefined : `${meterHeight}px`,
-              "--device-list-scroll-padding-start":
-                headingHeight === undefined ? undefined : `${headingHeight}px`,
            } as CSSProperties
          }
        >
-          {iconsAndLabels === "audio" && speakerOptions && (
-            <>
-              {/* A menu may only contain items, separators and groups, so each
-                  heading is a hidden part of a named group. */}
-              <div role="group" aria-label={t("settings.devices.speaker")}>
-                <div aria-hidden className={styles.sectionHeading}>
-                  <MenuTitle title={t("settings.devices.speaker")} />
-                </div>
-                {deviceItems(
-                  "output",
-                  speakerOptions,
-                  selectedSpeaker,
-                  onSelectOutput,
-                  (n) => t("settings.devices.speaker_numbered", { n }),
-                )}
-              </div>
-            </>
-          )}
-          <div role="group" aria-label={optionsButtonLabel}>
-            <div ref={heading} aria-hidden className={styles.sectionHeading}>
-              <MenuTitle title={optionsButtonLabel} />
-            </div>
-            {/* Apart from the heading, so the sticky meter can't ride over it. */}
-            <div role="none">
+          {audioMeter && speakerOptions && (
+            <MenuScrollSection title={t("settings.devices.speaker")}>
              {deviceItems(
-                "input",
-                options,
-                selectedOption,
-                onSelect,
-                numberedLabel,
+                "output",
+                speakerOptions,
+                selectedSpeaker,
+                onSelectOutput,
+                (n) => t("settings.devices.speaker_numbered", { n }),
              )}
-              {iconsAndLabels === "audio" && (
-                <LiveMicrophoneLevelMeter
-                  ref={meter}
-                  deviceId={selectedOption}
-                  // Only while open, so the microphone isn't held all call.
-                  active={menuOpen}
-                  className={styles.stickyMeter}
-                />
-              )}
-            </div>
-          </div>
-        </div>
+            </MenuScrollSection>
+          )}
+          <MenuScrollSection
+            title={optionsButtonLabel}
+            stickyBottomItem={audioMeter}
+          >
+            {deviceItems(
+              "input",
+              options,
+              selectedOption,
+              onSelect,
+              numberedLabel,
+            )}
+          </MenuScrollSection>
+        </MenuScrollArea>
        {toggles.length > 0 && <hr />}
        {toggles.map((toggle) => (
          <ToggleMenuItem
@@ -416,25 +395,3 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
    </div>
  );
 };
-
-/** Follows an element's height. */
-function useMeasuredHeight(): [
-  number | undefined,
-  (element: HTMLElement | null) => (() => void) | undefined,
-] {
-  const [height, setHeight] = useState<number>();
-  const ref = useCallback(
-    (element: HTMLElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map((size) => size.height),
-          distinctUntilChanged(),
-        )
-        .subscribe(setHeight);
-      return (): void => subscription.unsubscribe();
-    },
-    [],
-  );
-  return [height, ref];
-}
@@ -16,10 +16,10 @@ Please see LICENSE in the repository root for full details.
  align-items: center;
  gap: var(--cpd-space-3x);
  padding-block: var(--cpd-space-2x);
-  /* Centres the icon on the radio column: less the row's inset border and half
-     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
+  /* Centres the icon on the radio column: less half the icon's extra width.
+     Checked in the MeterAlignsWithTheDeviceRows story. */
  padding-inline-start: calc(
-    var(--cpd-space-4x) - var(--cpd-border-width-1) -
+    var(--cpd-space-4x) -
      (var(--meter-icon-size) - var(--device-control-size)) / 2
  );
  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
@@ -5,17 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type FC,
-  type Ref,
-} from "react";
+import { useCallback, useLayoutEffect, useRef, useState, type FC } from "react";
 import { Text } from "@vector-im/compound-web";
 import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import classNames from "classnames";
 import { useTranslation } from "react-i18next";

 import { distinctUntilChanged, map } from "rxjs";
@@ -30,8 +22,6 @@ export interface LiveMicrophoneLevelMeterProps {
  deviceId: string | undefined;
  /** Whether to hold a capture at all. */
  active: boolean;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
 }

 /**
@@ -41,24 +31,18 @@ export interface LiveMicrophoneLevelMeterProps {
 export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
  deviceId,
  active,
-  className,
-  ref,
 }) => {
  const state = useMicrophoneLevel(deviceId, active);
-  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+  return <MicrophoneLevelMeter state={state} />;
 };

 export interface MicrophoneLevelMeterProps {
  state: MicrophoneState;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
 }

 /** The input level of a microphone, or why there is none. */
 export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
  state,
-  className,
-  ref,
 }) => {
  const { t } = useTranslation();
  // Bars keep one size, so their count follows the width. Starts full so the
@@ -104,7 +88,7 @@ export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
  }, [state, barCount, t]);

  return (
-    <div ref={ref} className={classNames(styles.meter, className)}>
+    <div className={styles.meter}>
      <MicOnIcon className={styles.icon} aria-hidden />
      {state.type !== "level" ? (
        <Text size="sm" className={styles.message}>
@@ -5,25 +5,28 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";

-import { type CallLayout } from "./CallLayout";
+import { arrangeTiles, type Bounds } from "./CallLayout";
 import { makeGridLayout } from "./GridLayout";
 import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type LayoutProps } from "./Grid";
+import { type DragCallback, type LayoutProps } from "./Grid";
 import { constant } from "../state/Behavior";
-import { type Alignment } from "../state/layout-types";
+import {
+  type Alignment,
+  type GridLayout,
+  type SpotlightLandscapeLayout,
+  type SpotlightPortraitLayout,
+} from "../state/layout-types";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import {
  GridTileViewModel,
  SpotlightTileViewModel,
  type TileViewModel,
 } from "../state/TileViewModel";
-import { makeOneOnOneMobileLayout } from "./OneOnOneMobileLayout";
-import { makeSpotlightExpandedLayout } from "./SpotlightExpandedLayout";
-import { makeOneOnOneDesktopLayout } from "./OneOnOneDesktopLayout";

 // Grid supplies these hooks to the layouts it renders; on their own the
 // layouts have no grid to report to
@@ -33,105 +36,152 @@ vi.mock("./Grid", async (importOriginal) => ({
  useVisibleTiles: (): void => {},
 }));

-const minBounds$ = constant({ width: 800, height: 800 });
+describe("grid layout", () => {
+  it("sizes the tiles from the minimum bounds", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 800, height: 600 });
+    const { scrolling: Scrolling } = makeGridLayout({ minBounds$ });
+    render(<Scrolling model={gridModel()} Slot={Slot} />);
+    const layer = screen.getByTestId("slot-0").parentElement!;
+    expect(layer.style.width).toBe("800px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`,
+    );

-const spotlight = {
-  vm: new SpotlightTileViewModel(
-    constant([]),
-    constant(false),
-    constant("solid"),
-  ),
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-};
-const grid = Array.from(
-  { length: 3 },
-  () => new GridTileViewModel(constant({} as UserMediaViewModel)),
+    act(() => minBounds$.next({ width: 400, height: 300 }));
+    expect(layer.style.width).toBe("400px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`,
+    );
+  });
+
+  it("moves the spotlight only when a drag reaches another corner", () => {
+    const model = gridModel();
+    const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds });
+    render(<Fixed model={model} Slot={Slot} />);
+    const alignments: Alignment[] = [];
+    model.spotlightAlignment$.subscribe((a) => alignments.push(a));
+    const drag = drags.get("spotlight")!;
+
+    // Still in the bottom right corner
+    act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 }));
+    // Over to the bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 }));
+    // And a little further, still bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 }));
+    // Up to the top left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 }));
+
+    expect(alignments).toEqual([
+      { inline: "end", block: "end" },
+      { inline: "start", block: "end" },
+      { inline: "start", block: "start" },
+    ]);
+    const slot = screen.getByTestId("slot-spotlight");
+    expect(slot.getAttribute("data-inline-alignment")).toBe("start");
+    expect(slot.getAttribute("data-block-alignment")).toBe("start");
+  });
+});
+
+describe("spotlight landscape layout", () => {
+  it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => {
+    const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout(
+      { minBounds$: bounds },
+    );
+    const model = landscapeModel();
+    const { unmount } = render(<Fixed model={model} Slot={Slot} />);
+    expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument();
+    unmount();
+
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+  });
+});
+
+describe("spotlight portrait layout", () => {
+  it("sizes the grid tiles from the minimum width", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 300, height: 700 });
+    const { scrolling: Scrolling } = makeSpotlightPortraitLayout({
+      minBounds$,
+    });
+    const model = portraitModel();
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+    const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement!
+      .parentElement!;
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 500, height: 700 }));
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`,
+    );
+  });
+});
+
+const bounds = constant<Bounds>({ width: 800, height: 600 });
+
+// The layouts only pass tile view models through to their slots
+const media = {} as UserMediaViewModel;
+const spotlight = new SpotlightTileViewModel(
+  constant([]),
+  constant(false),
+  constant("solid"),
 );
-const pip = {
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-  vm: { id: "pip" } as GridTileViewModel,
-  size$: constant("sm" as const),
-};
+const tiles = (): GridTileViewModel[] =>
+  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));

+function gridModel(): GridLayout {
+  return {
+    type: "grid",
+    spotlight,
+    grid: tiles(),
+    spotlightAlignment$: new BehaviorSubject<Alignment>({
+      inline: "end",
+      block: "end",
+    }),
+    setVisibleTiles: () => {},
+  };
+}
+
+function landscapeModel(): SpotlightLandscapeLayout {
+  return {
+    type: "spotlight-landscape",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+function portraitModel(): SpotlightPortraitLayout {
+  return {
+    type: "spotlight-portrait",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+// Slots record their drag callback so a test can drag them, and show the id
+// of the tile they hold
+const drags = new Map<string, DragCallback | undefined>();
 const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
  id,
  model,
  onDrag,
-  children,
  ...props
-}) => (
-  <div data-testid={`slot-${id}`} {...props}>
-    {children}
-  </div>
-);
-
-function snapshotLayout<Model>(layout: CallLayout<Model>, model: Model): void {
-  const {
-    foreground,
-    scrolling: Scrolling,
-    fixed: Fixed,
-  } = layout({ minBounds$ });
-  const scrollingLayer = <Scrolling model={model} Slot={Slot} />;
-  const fixedLayer = <Fixed model={model} Slot={Slot} />;
-  const { container } = render(
-    foreground === "fixed" ? (
-      <>
-        {scrollingLayer}
-        {fixedLayer}
-      </>
-    ) : (
-      <>
-        {fixedLayer}
-        {scrollingLayer}
-      </>
-    ),
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
  );
-  expect(container).toMatchSnapshot();
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
 }
-
-test("grid layout", () =>
-  snapshotLayout(makeGridLayout, {
-    type: "grid",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight landscape layout", () =>
-  snapshotLayout(makeSpotlightLandscapeLayout, {
-    type: "spotlight-landscape",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight portrait layout", () =>
-  snapshotLayout(makeSpotlightPortraitLayout, {
-    type: "spotlight-portrait",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight expanded layout", () =>
-  snapshotLayout(makeSpotlightExpandedLayout, {
-    type: "spotlight-expanded",
-    spotlight: spotlight.vm,
-    pip,
-  }));
-
-test("one-on-one desktop layout", () =>
-  snapshotLayout(makeOneOnOneDesktopLayout, {
-    type: "one-on-one-desktop",
-    spotlight: { id: "spotlight" } as GridTileViewModel,
-    pip,
-  }));
-
-test("one-on-one mobile layout", () =>
-  snapshotLayout(makeOneOnOneMobileLayout, {
-    type: "one-on-one-mobile",
-    spotlight: spotlight.vm,
-    pip,
-  }));
@@ -40,7 +40,6 @@ import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { useInitial } from "../useInitial";
-import { type DragCallback } from "../state/layout-types";

 const MAX_ANIMATED_TILES = 50; // Capped for performance reasons

@@ -84,10 +83,7 @@ interface DragState {
  cursorY: number;
 }

-export interface SlotProps<Model> extends Omit<
-  ComponentProps<"div">,
-  "onDrag"
-> {
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
  id: string;
  model: Model;
  onDrag?: DragCallback;
@@ -185,6 +181,27 @@ export interface TileProps<Model, R extends HTMLElement> {
  model: Model;
 }

+interface Drag {
+  /**
+   * The X coordinate of the dragged tile in grid space.
+   */
+  x: number;
+  /**
+   * The Y coordinate of the dragged tile in grid space.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the grid width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the grid height.
+   */
+  yRatio: number;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
 interface LayoutMemoProps<
  LayoutModel,
  TileModel,
@@ -447,13 +464,13 @@ export function Grid<
      )
      .catch(logger.error);

-    callback({
-      x: tileX,
-      y: tileY,
-      xRatio: tileX / (gridBounds.width - tile.width),
-      yRatio: tileY / (gridBounds.height - tile.height),
-      endOfGesture,
-    });
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
  };

  // Callback for useDrag. We could call useDrag here, but the default
@@ -8,21 +8,15 @@ Please see LICENSE in the repository root for full details.
 import {
  type CSSProperties,
  type ReactNode,
+  useCallback,
  useMemo,
-  type FC,
-  type ComponentType,
 } from "react";

 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SlotProps, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
 import { useBehavior } from "../useBehavior";
-import {
-  type SpotlightTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type FloatingTile } from "../state/FloatingTile.ts";

 interface GridCSSProperties extends CSSProperties {
  "--gap": string;
@@ -30,27 +24,6 @@ interface GridCSSProperties extends CSSProperties {
  "--height": string;
 }

-interface SpotlightSlotProps {
-  model: FloatingTile & { vm: SpotlightTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const SpotlightSlot: FC<SpotlightSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.slot}
-      id="spotlight"
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
-
 /**
 * An implementation of the "grid" layout, in which all participants are shown
 * together in a scrolling grid.
@@ -64,10 +37,32 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
  // lives
  fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
    useUpdateLayout();
+    const alignment = useBehavior(model.spotlightAlignment$);
+
+    const onDragSpotlight: DragCallback = useCallback(
+      ({ xRatio, yRatio }) => {
+        const block = yRatio < 0.5 ? "start" : "end";
+        const inline = xRatio < 0.5 ? "start" : "end";
+        // A drag reports the same alignment on every move; only a change is
+        // worth a re-render
+        const current = model.spotlightAlignment$.value;
+        if (current.block !== block || current.inline !== inline)
+          model.spotlightAlignment$.next({ block, inline });
+      },
+      [model.spotlightAlignment$],
+    );
+
    return (
      <div ref={ref} className={styles.fixed}>
        {model.spotlight && (
-          <SpotlightSlot model={model.spotlight} Slot={Slot} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
        )}
      </div>
    );
@@ -6,13 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { type ReactNode, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import classNames from "classnames";

 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneDesktopLayout.module.css";
-import { useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";

 /**
@@ -37,12 +37,21 @@ export const makeOneOnOneDesktopLayout: CallLayout<
  }): ReactNode {
    useUpdateLayout();
    const { width, height } = useBehavior(minBounds$);
-    const pipAlignment = useBehavior(model.pip.alignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
    const { tileWidth, tileHeight } = useMemo(
      () => arrangeTiles(width, height, 1),
      [width, height],
    );

+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
    return (
      <div ref={ref} className={styles.layer}>
        <Slot
@@ -53,9 +62,9 @@ export const makeOneOnOneDesktopLayout: CallLayout<
        >
          <Slot
            className={classNames(styles.slot, styles.local)}
-            id={model.pip.vm.id}
-            model={model.pip.vm}
-            onDrag={model.pip.onDrag}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
            data-block-alignment={pipAlignment.block}
            data-inline-alignment={pipAlignment.inline}
          />
@@ -6,43 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { type ComponentType, type FC, type ReactNode } from "react";
+import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";

 import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
 import styles from "./OneOnOneMobileLayout.module.css";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type Behavior } from "../state/Behavior.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const size = useBehavior(model.size$);
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={classNames(styles.pip)}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-size={size}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};

 /**
 * An implementation of the "one-on-one" layout for mobile platforms, in which
@@ -73,9 +44,30 @@ export const makeOneOnOneMobileLayout: CallLayout<
    Slot,
  }): ReactNode {
    useUpdateLayout();
+    const pipSize = useBehavior(model.pipSize$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
    return (
      <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={classNames(styles.pip)}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
+            data-size={pipSize}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
      </div>
    );
  },
@@ -5,39 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { type ReactNode, type ComponentType, type FC } from "react";
+import { type ReactNode, useCallback } from "react";

 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.pip}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};

 /**
 * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -54,6 +28,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
    Slot,
  }): ReactNode {
    useUpdateLayout();
+
    return (
      <div ref={ref} className={styles.layer}>
        <Slot
@@ -71,9 +46,29 @@ export const makeSpotlightExpandedLayout: CallLayout<
    Slot,
  }): ReactNode {
    useUpdateLayout();
+    const pipAlignment = useBehavior(model.pipAlignment$);
+
+    const onDragPip: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
    return (
      <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={styles.pip}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragPip}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
      </div>
    );
  },
@@ -40,7 +40,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
          <Slot
            className={styles.slot}
            id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
          />
        </div>
        <div className={styles.grid} />
@@ -59,7 +59,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<

    return (
      <div ref={ref} className={styles.layer}>
-        <SpotlightSlot media$={model.spotlight.vm.media$} />
+        <SpotlightSlot media$={model.spotlight.media$} />
        <div className={styles.grid}>
          {model.grid.map((m) => (
            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
@@ -43,7 +43,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
          <Slot
            className={styles.slot}
            id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
          />
        </div>
      </div>
@@ -65,7 +65,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
      width,
      model.grid.length,
    );
-    const withIndicators = useBehavior(model.spotlight.vm.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;

    return (
      <div
@@ -1,186 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`grid layout 1`] = `
-<div>
-  <div
-    class="_scrolling_e8555d"
-    style="width: 800px; --gap: 20px; --width: 370px; --height: 277px;"
-  >
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-0"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-1"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-2"
-    />
-  </div>
-  <div
-    class="_fixed_e8555d"
-  >
-    <div
-      class="_slot_e8555d"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-spotlight"
-    />
-  </div>
-</div>
-`;
-
-exports[`one-on-one desktop layout 1`] = `
-<div>
-  <div
-    class="_layer_185815"
-  >
-    <div
-      class="_container_185815"
-      data-testid="slot-spotlight"
-      style="width: 760px; height: 570px;"
-    >
-      <div
-        class="_slot_185815 _local_185815"
-        data-block-alignment="end"
-        data-inline-alignment="end"
-        data-testid="slot-pip"
-      />
-    </div>
-  </div>
-  <div />
-</div>
-`;
-
-exports[`one-on-one mobile layout 1`] = `
-<div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_spotlight_c81c30"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_pip_c81c30"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-size="sm"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight expanded layout 1`] = `
-<div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_spotlight_e70191"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_pip_e70191"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight landscape layout 1`] = `
-<div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-spotlight"
-      />
-    </div>
-    <div
-      class="_grid_29809c"
-    />
-  </div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    />
-    <div
-      class="_grid_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`spotlight portrait layout 1`] = `
-<div>
-  <div
-    class="_layer_065bbc"
-    style="--grid-gap: 20px; --grid-tile-width: 370px; --grid-tile-height: 277px;"
-  >
-    <div
-      class="_spotlight_065bbc"
-    />
-    <div
-      class="_grid_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-  <div
-    class="_layer_065bbc"
-  >
-    <div
-      class="_spotlight_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-spotlight"
-      />
-    </div>
-  </div>
-</div>
-`;
@@ -155,7 +155,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
        case "grid":
          return combineLatest(
            [
-              l.spotlight?.vm.media$ ?? constant(undefined),
+              l.spotlight?.media$ ?? constant(undefined),
              ...l.grid.map((vm) => vm.media$),
            ],
            (spotlight, ...grid) => ({
@@ -167,7 +167,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
        case "spotlight-landscape":
        case "spotlight-portrait":
          return combineLatest(
-            [l.spotlight.vm.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.media$, ...l.grid.map((vm) => vm.media$)],
            (spotlight, ...grid) => ({
              type: l.type,
              spotlight: spotlight.map((vm) => vm.id),
@@ -176,7 +176,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
          );
        case "spotlight-expanded":
          return combineLatest(
-            [l.spotlight.media$, l.pip?.vm.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
            (spotlight, pip) => ({
              type: l.type,
              spotlight: spotlight.map((vm) => vm.id),
@@ -185,7 +185,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
          );
        case "one-on-one-desktop":
          return combineLatest(
-            [l.spotlight.media$, l.pip.vm.media$],
+            [l.spotlight.media$, l.pip.media$],
            (spotlight, pip) => ({
              type: l.type,
              spotlight: spotlight.id,
@@ -196,8 +196,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
          return combineLatest(
            [
              l.spotlight.media$,
-              l.pip?.vm.media$ ?? constant(undefined),
-              l.pip?.size$ ?? constant(undefined),
+              l.pip?.media$ ?? constant(undefined),
+              l.pipSize$,
            ],
            (spotlight, pip, pipSize) => ({
              type: l.type,
@@ -506,7 +506,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
              },
              b: {
                type: "one-on-one-mobile",
@@ -544,7 +544,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
              type: "one-on-one-mobile",
              spotlight: [`${aliceId}:0`],
              pip: undefined,
-              pipSize: undefined,
+              pipSize: "lg",
            },
          });
          // It wouldn't be clear whether Alice or Bob is the remote video tile,
@@ -592,7 +592,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: undefined,
-                pipSize: undefined,
+                pipSize: "sm",
              },
              b: {
                type: "spotlight-landscape",
@@ -791,7 +791,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
              },
              b: {
                // In a larger window, expect the one-on-one desktop layout
@@ -78,13 +78,14 @@ import {
  type ReactionInfo,
  type ReactionOption,
 } from "../../reactions";
-import { shallowEquals as arrayShallowEquals } from "../../utils/array";
+import { shallowEquals as shallowArrayEquals } from "../../utils/array";
+import { shallowEquals as shallowObjectEquals } from "../../utils/object";
 import { type MediaDevice, type MediaDevices } from "../MediaDevices";
 import { type Handler, type MuteStates } from "../MuteStates";
 import { HeaderStyle, type UrlParams } from "../../UrlParams";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
-  layoutShallowEquals,
+  type Alignment,
  type Layout,
  type LayoutMedia,
  type WindowMode,
@@ -125,7 +126,6 @@ import {
  type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
-import { createFloatingTile } from "../FloatingTile.ts";

 /** How a call captures and encodes the tracks it publishes. */
 export interface CaptureSettings {
@@ -830,7 +830,7 @@ export function createCallViewModel$(
              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
            );
      }),
-      distinctUntilChanged(arrayShallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
    ),
  );

@@ -862,18 +862,13 @@ export function createCallViewModel$(
      [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
      (ringing, screenShares, speaker, localPip) =>
        computeSpotlight({ ringing, screenShares, speaker, localPip }),
-    ).pipe(
-      distinctUntilChanged(
-        (a, b) =>
-          arrayShallowEquals(a.spotlight, b.spotlight) && a.pip === b.pip,
-      ),
-    ),
+    ).pipe(distinctUntilChanged(shallowObjectEquals)),
  );

  const spotlight$ = scope.behavior<MediaViewModel[]>(
    spotlightAndPip$.pipe(
      map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(arrayShallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
    ),
  );

@@ -1034,7 +1029,7 @@ export function createCallViewModel$(
          desktop: platform === "desktop",
        }),
      ),
-      distinctUntilChanged(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<LayoutMedia>),
    ),
  );

@@ -1226,28 +1221,32 @@ export function createCallViewModel$(
  );

  /**
-   * State of the floating spotlight tile, if present.
+   * The alignment of the floating spotlight tile, if present.
   */
-  const floatingSpotlightTile = createFloatingTile(scope, {
+  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
    inline: "end",
    block: "end",
  });
  /**
-   * State of the small picture-in-picture tile, if present, when in landscape.
+   * The size of the small picture-in-picture tile, if present, when in portrait.
   */
-  const landscapePipTile = createFloatingTile(scope, {
+  const portraitPipSize$ = scope.behavior(
+    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+  );
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  });
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in landscape.
+   */
+  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
    inline: "end",
    block: "start",
  });
-  /**
-   * State of the small picture-in-picture tile, if present, when in portrait.
-   */
-  const portraitPipTile = {
-    ...createFloatingTile(scope, { inline: "end", block: "end" }),
-    size$: scope.behavior(
-      showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
-    ),
-  };

  // There is a cyclical dependency here: the layout algorithms want to know
  // which tiles are on screen, but to know which tiles are on screen we have to
@@ -1277,7 +1276,7 @@ export function createCallViewModel$(
            case "spotlight-portrait":
              [layout, newTiles] = gridLikeLayout(
                media,
-                floatingSpotlightTile,
+                spotlightAlignment$,
                visibleTiles,
                setVisibleTiles,
                prevTiles,
@@ -1287,25 +1286,26 @@ export function createCallViewModel$(
            case "spotlight-expanded":
              [layout, newTiles] = spotlightExpandedLayout(
                media,
-                landscapePipTile,
+                landscapePipAlignment$,
                prevTiles,
              );
              break;
            case "one-on-one-desktop":
              [layout, newTiles] = oneOnOneDesktopLayout(
                media,
-                landscapePipTile,
+                landscapePipAlignment$,
                prevTiles,
              );
-              pip = layout.pip.vm;
+              pip = layout.pip;
              break;
            case "one-on-one-mobile":
              [layout, newTiles] = oneOnOneMobileLayout(
                media,
-                portraitPipTile,
+                portraitPipSize$,
+                portraitPipAlignment$,
                prevTiles,
              );
-              pip = layout.pip?.vm;
+              pip = layout.pip;
              break;
            case "pip":
              [layout, newTiles] = pipLayout(media, prevTiles);
@@ -1330,7 +1330,7 @@ export function createCallViewModel$(
    layoutInternals$.pipe(
      map(({ layout }) => layout),
      // Drop redundant layout updates before they would hit React.
-      distinctUntilChanged(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<Layout>),
    ),
  );

@@ -1,38 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { test } from "vitest";
-import { withTestScheduler } from "../utils/test";
-import { createFloatingTile } from "./FloatingTile";
-
-test("FloatingTile changes alignment on drag", () =>
-  withTestScheduler(({ scope, expectObservable, schedule }) => {
-    // Tile starts in the top left
-    const { alignment$, onDrag } = createFloatingTile(scope, {
-      inline: "start",
-      block: "start",
-    });
-    // Drag to all four corners, and then repeatedly into the top left.
-    schedule("-↗↘↙↖↖", {
-      "↗": () =>
-        onDrag({ x: 100, y: 0, xRatio: 1, yRatio: 0, endOfGesture: false }),
-      "↘": () =>
-        onDrag({ x: 100, y: 100, xRatio: 1, yRatio: 1, endOfGesture: false }),
-      "↙": () =>
-        onDrag({ x: 0, y: 100, xRatio: 0, yRatio: 1, endOfGesture: false }),
-      "↖": () =>
-        onDrag({ x: 0, y: 0, xRatio: 0, yRatio: 0, endOfGesture: false }),
-    });
-    // Alignment should change accordingly. Notably, the alignment should *not*
-    // update when repeatedly dragged into the same corner, for performance.
-    expectObservable(alignment$).toBe("↖↗↘↙↖-", {
-      "↗": { inline: "end", block: "start" },
-      "↘": { inline: "end", block: "end" },
-      "↙": { inline: "start", block: "end" },
-      "↖": { inline: "start", block: "start" },
-    });
-  }));
@@ -1,43 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { distinctUntilChanged, map, startWith, Subject } from "rxjs";
-
-import { type Behavior } from "./Behavior";
-import { type DragCallback, type Alignment, type Drag } from "./layout-types";
-import { type ObservableScope } from "./ObservableScope";
-
-/**
- * Represents a floating tile which may be dragged to different corners of the
- * call interface.
- */
-export interface FloatingTile {
-  alignment$: Behavior<Alignment>;
-  onDrag: DragCallback;
-}
-
-export function createFloatingTile(
-  scope: ObservableScope,
-  defaultAlignment: Alignment,
-): FloatingTile {
-  const dragEvents$ = new Subject<Drag>();
-  return {
-    alignment$: scope.behavior(
-      dragEvents$.pipe(
-        map<Drag, Alignment>(({ xRatio, yRatio }) => ({
-          inline: xRatio < 0.5 ? "start" : "end",
-          block: yRatio < 0.5 ? "start" : "end",
-        })),
-        startWith(defaultAlignment),
-        distinctUntilChanged(
-          (a1, a2) => a1.inline === a2.inline && a1.block === a2.block,
-        ),
-      ),
-    ),
-    onDrag: (drag) => dragEvents$.next(drag),
-  };
-}
@@ -5,9 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { type Layout, type LayoutMedia } from "./layout-types.ts";
+import { type BehaviorSubject } from "rxjs";
+
+import {
+  type Alignment,
+  type Layout,
+  type LayoutMedia,
+} from "./layout-types.ts";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile.ts";

 export type GridLikeLayoutType =
  | "grid"
@@ -20,7 +25,7 @@ export type GridLikeLayoutType =
 */
 export function gridLikeLayout(
  media: LayoutMedia & { type: GridLikeLayoutType },
-  floatingSpotlightTile: FloatingTile,
+  spotlightAlignment$: BehaviorSubject<Alignment>,
  visibleTiles: number,
  setVisibleTiles: (value: number) => void,
  prevTiles: TileStore,
@@ -37,11 +42,9 @@ export function gridLikeLayout(
  return [
    {
      type: media.type,
-      spotlight: tiles.spotlightTile && {
-        vm: tiles.spotlightTile,
-        ...floatingSpotlightTile,
-      },
+      spotlight: tiles.spotlightTile,
      grid: tiles.gridTiles,
+      spotlightAlignment$,
      setVisibleTiles,
    } as Layout & { type: GridLikeLayoutType },
    tiles,
@@ -6,19 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
  type OneOnOneDesktopLayout,
  type OneOnOneDesktopLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile";

 /**
 * Produces a one-on-one desktop layout with the given media.
 */
 export function oneOnOneDesktopLayout(
  media: OneOnOneDesktopLayoutMedia,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
  prevTiles: TileStore,
 ): [OneOnOneDesktopLayout, TileStore] {
  const update = prevTiles.from(2);
@@ -30,7 +32,8 @@ export function oneOnOneDesktopLayout(
    {
      type: media.type,
      spotlight: tiles.gridTilesByMedia.get(media.spotlight)!,
-      pip: { vm: tiles.gridTilesByMedia.get(media.pip)!, ...pipTile },
+      pip: tiles.gridTilesByMedia.get(media.pip)!,
+      pipAlignment$,
    },
    tiles,
  ];
@@ -6,20 +6,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
  type OneOnOneMobileLayout,
  type OneOnOneMobileLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
 import { type Behavior } from "./Behavior";
-import { type FloatingTile } from "./FloatingTile";

 /**
 * Produces a one-on-one mobile layout with the given media.
 */
 export function oneOnOneMobileLayout(
  media: OneOnOneMobileLayoutMedia,
-  pipTile: FloatingTile & { size$: Behavior<"sm" | "lg"> },
+  pipSize$: Behavior<"sm" | "lg">,
+  pipAlignment$: BehaviorSubject<Alignment>,
  prevTiles: TileStore,
 ): [OneOnOneMobileLayout, TileStore] {
  const update = prevTiles.from(media.pip === undefined ? 0 : 1);
@@ -27,12 +30,13 @@ export function oneOnOneMobileLayout(
  if (media.pip !== undefined) update.registerGridTile(media.pip);
  const tiles = update.build();

-  const pipVm = media.pip && tiles.gridTilesByMedia.get(media.pip);
  return [
    {
      type: media.type,
      spotlight: tiles.spotlightTile!,
-      pip: pipVm && { vm: pipVm, ...pipTile },
+      pip: media.pip && tiles.gridTilesByMedia.get(media.pip),
+      pipSize$,
+      pipAlignment$,
    },
    tiles,
  ];
@@ -5,19 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
  type SpotlightExpandedLayout,
  type SpotlightExpandedLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
-import { type FloatingTile } from "./FloatingTile";

 /**
 * Produces an expanded spotlight layout with the given media.
 */
 export function spotlightExpandedLayout(
  media: SpotlightExpandedLayoutMedia,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
  prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
  const update = prevTiles.from(1);
@@ -25,12 +27,12 @@ export function spotlightExpandedLayout(
  if (media.pip !== undefined) update.registerPipTile(media.pip);
  const tiles = update.build();

-  const pipVm = tiles.gridTiles.at(0);
  return [
    {
      type: media.type,
      spotlight: tiles.spotlightTile!,
-      pip: pipVm && { vm: pipVm, ...pipTile },
+      pip: tiles.gridTiles.at(0),
+      pipAlignment$,
    },
    tiles,
  ];
@@ -1,82 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { test, expect } from "vitest";
-import { layoutShallowEquals, type Layout } from "./layout-types";
-import {
-  type SpotlightTileViewModel,
-  type GridTileViewModel,
-} from "./TileViewModel";
-import { type FloatingTile } from "./FloatingTile";
-
-const spotlightTile = {} as unknown as SpotlightTileViewModel;
-const gridTile = {} as unknown as GridTileViewModel;
-const pipTile = {} as unknown as FloatingTile & { vm: GridTileViewModel };
-
-const spotlightExpanded: Layout = {
-  type: "spotlight-expanded",
-  spotlight: spotlightTile,
-};
-
-const spotlightPortrait: Layout = {
-  type: "spotlight-portrait",
-  spotlight: { vm: spotlightTile },
-  grid: [gridTile],
-  setVisibleTiles: () => {},
-};
-
-test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
-  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
-    true,
-  ));
-
-test("layoutShallowEquals detects a missing key", () => {
-  expect(
-    layoutShallowEquals(spotlightExpanded, {
-      ...spotlightExpanded,
-      pip: pipTile,
-    }),
-  ).toBe(false);
-  expect(
-    layoutShallowEquals(
-      { ...spotlightExpanded, pip: pipTile },
-      spotlightExpanded,
-    ),
-  ).toBe(false);
-});
-
-test("layoutShallowEquals considers tile wrappers with equal contents to be equal", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      spotlight: { vm: spotlightTile },
-    }),
-  ).toBe(true));
-
-test("layoutShallowEquals detects tile wrappers with different contents", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      spotlight: { vm: {} as unknown as SpotlightTileViewModel },
-    }),
-  ).toBe(false));
-
-test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid],
-    }),
-  ).toBe(true));
-
-test("layoutShallowEquals detects grid arrays with different contents", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid, gridTile],
-    }),
-  ).toBe(false));
@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

+import { type BehaviorSubject } from "rxjs";
+
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -14,9 +16,6 @@ import {
  type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
-import { type FloatingTile } from "./FloatingTile.ts";
-import { shallowEquals } from "../utils/object.ts";
-import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";

 /**
 * The general shape of the space the call is drawn in. Called a window because
@@ -87,48 +86,24 @@ export interface Alignment {
  block: "start" | "end";
 }

-export interface Drag {
-  /**
-   * The X offset of the dragged tile relative to its container.
-   */
-  x: number;
-  /**
-   * The Y offset of the dragged tile relative to its container.
-   */
-  y: number;
-  /**
-   * The X coordinate of the dragged tile, as a scalar of the container's width.
-   */
-  xRatio: number;
-  /**
-   * The Y coordinate of the dragged tile, as a scalar of the container's height.
-   */
-  yRatio: number;
-  /**
-   * Whether this event ends the drag gesture.
-   */
-  endOfGesture: boolean;
-}
-
-export type DragCallback = (drag: Drag) => void;
-
 export interface GridLayout {
  type: "grid";
-  spotlight?: FloatingTile & { vm: SpotlightTileViewModel };
+  spotlight?: SpotlightTileViewModel;
  grid: GridTileViewModel[];
+  spotlightAlignment$: BehaviorSubject<Alignment>;
  setVisibleTiles: (value: number) => void;
 }

 export interface SpotlightLandscapeLayout {
  type: "spotlight-landscape";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
  grid: GridTileViewModel[];
  setVisibleTiles: (value: number) => void;
 }

 export interface SpotlightPortraitLayout {
  type: "spotlight-portrait";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
  grid: GridTileViewModel[];
  setVisibleTiles: (value: number) => void;
 }
@@ -136,19 +111,23 @@ export interface SpotlightPortraitLayout {
 export interface SpotlightExpandedLayout {
  type: "spotlight-expanded";
  spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel };
+  pip?: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }

 export interface OneOnOneDesktopLayout {
  type: "one-on-one-desktop";
  spotlight: GridTileViewModel;
-  pip: FloatingTile & { vm: GridTileViewModel };
+  pip: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }

 export interface OneOnOneMobileLayout {
  type: "one-on-one-mobile";
  spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
+  pip?: GridTileViewModel;
+  pipSize$: Behavior<"sm" | "lg">;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }

 export interface PipLayout {
@@ -168,34 +147,3 @@ export type Layout =
  | OneOnOneDesktopLayout
  | OneOnOneMobileLayout
  | PipLayout;
-
-/**
- * Tests whether the top-level properties, tile wrapper properties, and array
- * elements of layout `a` are equal to those of layout `b`. Useful for deduping
- * redundant layout updates.
- */
-export function layoutShallowEquals<T extends Layout | LayoutMedia>(
-  a: T,
-  b: T,
-): boolean {
-  return shallowEquals<T>(a, b, (aValue, bValue) => {
-    // Special case for tile wrapper objects so we can detect when the
-    // spotlight or PiP tile is essentially the same
-    if (
-      typeof aValue === "object" &&
-      aValue !== null &&
-      "vm" in aValue &&
-      typeof bValue === "object" &&
-      bValue !== null &&
-      "vm" in bValue
-    )
-      return shallowEquals(aValue, bValue);
-
-    // Special case for arrays so we can detect when the grid tile arrays are
-    // essentially the same
-    if (Array.isArray(aValue) && Array.isArray(bValue))
-      return arrayShallowEquals(aValue, bValue);
-
-    return aValue === bValue;
-  });
-}
@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.

 import { test, expect } from "vitest";
 import { shallowEquals } from "./object";
-import { shallowEquals as arrayShallowEquals } from "./array";

 interface Thing {
  type: string;
@@ -30,26 +29,12 @@ test("shallowEquals detects a missing key", () => {
 test("shallowEquals detects a differing value", () =>
  expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));

-const comparator = (aValue: unknown, bValue: unknown): boolean => {
-  if (Array.isArray(aValue) && Array.isArray(bValue))
-    return arrayShallowEquals(aValue, bValue);
-  return aValue === bValue;
-};
-
-test("shallowEquals with comparator considers arrays with equal contents to be equal", () =>
+test("shallowEquals considers arrays with equal contents to be equal", () =>
  expect(
-    shallowEquals(
-      withArray,
-      { ...withArray, items: [...withArray.items] },
-      comparator,
-    ),
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
  ).toBe(true));

-test("shallowEquals with comparator detects arrays with different contents", () =>
+test("shallowEquals detects arrays with different contents", () =>
  expect(
-    shallowEquals(
-      withArray,
-      { ...withArray, items: [...withArray.items, {}] },
-      comparator,
-    ),
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
  ).toBe(false));
@@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

+import { shallowEquals as arrayShallowEquals } from "./array.ts";
+
 /**
 * Determine whether two objects are equal by shallow comparison of their
- * top-level properties, using the given `comparator`.
+ * top-level properties. Array-valued properties are themselves compared
+ * shallowly, so two objects holding distinct arrays with the same elements are
+ * considered equal.
 */
 export function shallowEquals<T extends object>(
  a: Readonly<T>,
  b: Readonly<T>,
-  comparator: (aValue: unknown, bValue: unknown) => boolean = (
-    aValue,
-    bValue,
-  ) => aValue === bValue,
 ): boolean {
  // If a and b have the same number of keys and every key in a is also in b,
  // then they have the same keys.
@@ -29,7 +29,9 @@ export function shallowEquals<T extends object>(
    // Now check that they have the same values.
    const aValue = (a as any)[key];
    const bValue = (b as any)[key];
-    if (!comparator(aValue, bValue)) return false;
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
  }

  return true;
@@ -38,8 +38,21 @@ export default defineConfig(({ mode }) => {
    ...base,
    root: "component/dev",
    // The same scoping the library build applies, so the harness shows what a
-    // host will get — including whether its own page is left alone
-    css: { postcss: { plugins: [scopeStylesToRoot()] } },
+    // host will get — including whether its own page is left alone. The host's
+    // own stylesheets, Compound's among them, stay unscoped, as on a real host.
+    css: {
+      postcss: {
+        plugins: [
+          scopeStylesToRoot({
+            exclude: [
+              /component[\\/]dev[\\/]/,
+              /@vector-im[\\/]compound-/,
+              /@fontsource[\\/]/,
+            ],
+          }),
+        ],
+      },
+    },
    // So that the harness can read the same config.json the standalone app
    // does, if the developer has written one
    publicDir: "../../public",
Author	SHA1	Message	Date
Timo K.	8ef1dee256	bump compound web	2026-10-29 13:11:44 +01:00
Timo K.	38ef1add48	use compound web sticky patch	2026-10-28 19:29:08 +01:00
Timo K.	cffdb58521	rop the device list's custom fade under the mete	2026-10-28 16:33:31 +01:00
Timo K.	2abe7ea02f	better docs for the sub test trick	2026-10-28 16:27:38 +01:00
Timo K.	17caded88b	clean up css calc in ts code	2026-10-28 16:11:49 +01:00
Timo K.	c713b13994	review: audioMeter instead of `iconsAndLabels === "audio"`	2026-10-28 15:17:44 +01:00
fkwpandClaude Opus 5.5	9e6f2e89a8	Size and scroll the device menus with Compound's menu - Compound 10.3.0 bounds a menu by the space it has and scrolls what doesn't fit, within a boundary the app passes. The menus pass the call area, 16px in from its sides, rather than measuring its width. - The 296px width is the menu's own style. Compound gives that style only to the dropdown, so menuIsDrawer, which copied its phone rule, goes. - Compound draws the menu's frame over its content, so nothing that scrolls can hide it in Safari: the list, headings and meter no longer keep a border width clear of it, and the checks that they did go. - The device list is Compound's scroll area, so it fades out at the foot with Compound's chevron while there is more below. - The microphone menu's meter sticks at that foot, with rows scrolling under it as before, so the list has no fade above it: Compound's is a mask fixed to the list's edge, while a bounce at the top carries the meter with the rows. The band under the meter is filled, or rows would show there. The edge fades from where the chevron starts, so a bounce fades the meter out before it reaches the chevron. A row reached by keyboard stays above the meter. - The list's height is still its share of the call. - The component harness leaves the host's stylesheets unscoped, Compound's among them, as a host does: scoped, they never reached the menu, which is portalled out of Element Call's root. - Its specs check only Element Call's own document styles on the host page, and find the device list within Compound's scroll area. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>	2026-10-26 15:48:52 +01:00
fkwpandClaude Opus 5.5	7a48b09c4c	Hold both device menus at 296px, framed in Safari too - The camera and microphone menus were as wide as their longest device name, so a long one widened the menu over more of the call: 340px for a long speaker name. Both are now 296px, as design sets them, and a long name wraps. - Narrower only where the call area is, so the menu still fits inside it: 268px in a 300px call. Taken from the observation of the call area that already bounds the list's height. - Held only for the dropdown. On Android and iOS Compound renders the menu as a drawer as wide as the screen; menuIsDrawer follows its rule. - Once the list is long enough to scroll, Safari paints it above the outline the menu is framed with, and the frame vanished down both sides of it: 384px of it on the many-devices microphone menu, in WebKit. The list now keeps a border width clear of the frame, so the headings and the meter inside it no longer need their own. - Guarded with a long speaker name, which fails at 340px on main's sizing; a unit test run as a phone, which fails with the width held there; and the many-devices story's inset, which fails on the old stylesheet, since the stories run in Chromium, which never showed the Safari bug. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>	2026-10-26 15:48:07 +01:00
Robin	ed6a0e1341	Merge pull request #4371 from element-hq/ellipsize-title Ellipsise app bar text on mobile	2026-10-26 13:45:06 +01:00
renovate[bot]andJohannes Marbach	90ccf62d5c	Update ghcr.io/element-hq/element-web:develop Docker digest to c9ffe3e (#4356 ) * Update ghcr.io/element-hq/element-web:develop Docker digest to 79e47d8 * Adapt to new recovery popup button title --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2026-10-26 12:44:39 +00:00
Robin	dde07f6d54	Ellipsise app bar text on mobile We already had text-overflow: ellipsis set on the title and subtitle elements of the app bar, but due to an annoying quirk of place-items: center, this had no effect. place-items: center stretch seems to give the text elements the right size constraints.	2026-10-26 13:25:13 +01:00