From 2cf4a38c1743ad2895c5c4ebfba8e1b7d474c76e Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Tue, 3 Mar 2026 16:47:41 -0600
Subject: [PATCH 01/15] Add volume logic to RemoteScreenShareViewModel

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/state/media/RemoteScreenShareViewModel.ts | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/state/media/RemoteScreenShareViewModel.ts b/src/state/media/RemoteScreenShareViewModel.ts
index eff6d9c1..78fc0494 100644
--- a/src/state/media/RemoteScreenShareViewModel.ts
+++ b/src/state/media/RemoteScreenShareViewModel.ts
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type RemoteParticipant } from "livekit-client";
-import { map } from "rxjs";
+import { Track, type RemoteParticipant } from "livekit-client";
+import { map, of, switchMap } from "rxjs";
 
 import { type Behavior } from "../Behavior";
 import {
@@ -16,13 +16,17 @@ import {
   createBaseScreenShare,
 } from "./ScreenShareViewModel";
 import { type ObservableScope } from "../ObservableScope";
+import { createVolumeControls, type VolumeControls } from "../VolumeControls";
+import { observeTrackReference$ } from "../observeTrackReference";
 
-export interface RemoteScreenShareViewModel extends BaseScreenShareViewModel {
+export interface RemoteScreenShareViewModel
+  extends BaseScreenShareViewModel, VolumeControls {
   local: false;
   /**
    * Whether this screen share's video should be displayed.
    */
   videoEnabled$: Behavior<boolean>;
+  audioEnabled$: Behavior<boolean>;
 }
 
 export interface RemoteScreenShareInputs extends BaseScreenShareInputs {
@@ -36,9 +40,30 @@ export function createRemoteScreenShare(
 ): RemoteScreenShareViewModel {
   return {
     ...createBaseScreenShare(scope, inputs),
+    ...createVolumeControls(scope, {
+      pretendToBeDisconnected$,
+      sink$: scope.behavior(
+        inputs.participant$.pipe(
+          map(
+            (p) => (volume) =>
+              p?.setVolume(volume, Track.Source.ScreenShareAudio),
+          ),
+        ),
+      ),
+    }),
     local: false,
     videoEnabled$: scope.behavior(
       pretendToBeDisconnected$.pipe(map((disconnected) => !disconnected)),
     ),
+    audioEnabled$: scope.behavior(
+      inputs.participant$.pipe(
+        switchMap((p) =>
+          p
+            ? observeTrackReference$(p, Track.Source.ScreenShareAudio)
+            : of(null),
+        ),
+        map(Boolean),
+      ),
+    ),
   };
 }

From 72520dbb3f8f9a08701c207d79047e38160f4e4a Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 01:41:16 -0600
Subject: [PATCH 02/15] Add screen share volume slider UI

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 locales/en/app.json               |  1 +
 src/tile/SpotlightTile.module.css | 26 +++++++++
 src/tile/SpotlightTile.tsx        | 94 +++++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+)

diff --git a/locales/en/app.json b/locales/en/app.json
index 0b0ac7b4..6ec4859e 100644
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -256,6 +256,7 @@
     "mute_for_me": "Mute for me",
     "muted_for_me": "Muted for me",
     "volume": "Volume",
+    "screen_share_volume": "Screen share volume",
     "waiting_for_media": "Waiting for media..."
   }
 }
diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css
index 622496d2..43c3d53c 100644
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -108,6 +108,32 @@ Please see LICENSE in the repository root for full details.
   z-index: 1;
 }
 
+.volumeSlider {
+  width: 100%;
+}
+
+/* Disable the hover effect for the screen share volume menu button */
+.volumeMenuItem:hover {
+  background: transparent;
+  cursor: default;
+}
+
+.volumeMenuItem {
+  gap: var(--cpd-space-3x);
+}
+
+.menuMuteButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+}
+
+/* Make icons change color with the theme */
+.menuMuteButton > svg {
+  color: var(--cpd-color-icon-primary);
+}
+
 .expand > svg {
   display: block;
   color: var(--cpd-color-icon-primary);
diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 75c69479..93a1fbd9 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -20,6 +20,8 @@ import {
   CollapseIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  VolumeOffIcon,
+  VolumeOnIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
@@ -27,6 +29,7 @@ import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
+import { Menu, MenuItem } from "@vector-im/compound-web";
 
 import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
 import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
@@ -45,6 +48,8 @@ import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import { type ScreenShareViewModel } from "../state/media/ScreenShareViewModel";
 import { type RemoteScreenShareViewModel } from "../state/media/RemoteScreenShareViewModel";
 import { type MediaViewModel } from "../state/media/MediaViewModel";
+import { Slider } from "../Slider";
+import { constant } from "../state/Behavior";
 
 interface SpotlightItemBaseProps {
   ref?: Ref<HTMLDivElement>;
@@ -260,6 +265,33 @@ export const SpotlightTile: FC<Props> = ({
   const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
   const canGoBack = visibleIndex > 0;
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
+  const currentMedia = media[visibleIndex];
+  // isScreenShare only needs to check "audioEnabled$" but I wanted to be more specific
+  // just in case more models are added in the future, since screen shares always have video
+  const isScreenShare =
+    currentMedia &&
+    "audioEnabled$" in currentMedia &&
+    "videoEnabled$" in currentMedia;
+
+  const hasAudio$ = useBehavior(
+    isScreenShare && currentMedia?.audioEnabled$
+      ? currentMedia.audioEnabled$
+      : constant(false),
+  );
+  const isLocalScreenShare = isScreenShare && currentMedia.local;
+  const screenShareLocallyMuted = useBehavior(
+    isScreenShare
+      ? (currentMedia as RemoteScreenShareViewModel).playbackMuted$
+      : constant(false),
+  );
+  const ScreenShareVolumeIcon = screenShareLocallyMuted
+    ? VolumeOffIcon
+    : VolumeOnIcon;
+  const screenShareVolume = useBehavior(
+    isScreenShare
+      ? (currentMedia as RemoteScreenShareViewModel).playbackVolume$
+      : constant(0),
+  );
 
   const isFullscreen = useCallback((): boolean => {
     const rootElement = document.body;
@@ -328,6 +360,7 @@ export const SpotlightTile: FC<Props> = ({
   }, [latestVisibleId, latestMedia, setScrollToId]);
 
   const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
+  const [openVolumeMenu, setOpenVolumeMenu] = useState(false);
 
   return (
     <animated.div
@@ -366,6 +399,67 @@ export const SpotlightTile: FC<Props> = ({
         ))}
       </div>
       <div className={styles.bottomRightButtons}>
+        {/*
+          Show volume slider only when the tile is a screenshare, has audio,
+          is in spotlight mode, and isn't your own screen share.
+        */}
+        {isScreenShare &&
+          hasAudio$ &&
+          onToggleExpanded &&
+          !isLocalScreenShare && (
+            <Menu
+              open={openVolumeMenu}
+              onOpenChange={setOpenVolumeMenu}
+              title={t("video_tile.screen_share_volume")}
+              side="top"
+              align="end"
+              trigger={
+                <button
+                  className={classNames(styles.expand)}
+                  aria-label={t("video_tile.screen_share_volume")}
+                >
+                  <ScreenShareVolumeIcon aria-hidden width={20} height={20} />
+                </button>
+              }
+            >
+              <MenuItem
+                as="div"
+                className={styles.volumeMenuItem}
+                onSelect={null}
+                label={null}
+                hideChevron={true}
+              >
+                <button
+                  className={styles.menuMuteButton}
+                  onClick={() => {
+                    (
+                      currentMedia as RemoteScreenShareViewModel
+                    ).togglePlaybackMuted();
+                  }}
+                >
+                  <ScreenShareVolumeIcon aria-hidden width={24} height={24} />
+                </button>
+                <Slider
+                  className={styles.volumeSlider}
+                  label={t("video_tile.volume")}
+                  value={screenShareVolume}
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  onValueChange={(v) =>
+                    (
+                      currentMedia as RemoteScreenShareViewModel
+                    ).adjustPlaybackVolume(v)
+                  }
+                  onValueCommit={() =>
+                    (
+                      currentMedia as RemoteScreenShareViewModel
+                    ).commitPlaybackVolume()
+                  }
+                />
+              </MenuItem>
+            </Menu>
+          )}
         <button
           className={classNames(styles.expand)}
           aria-label={"maximise"}

From a34fe7817ac2f77c021939238e096fba3c33045d Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 03:26:29 -0600
Subject: [PATCH 03/15] Add tests for screen share volume controls

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/state/media/MediaViewModel.test.ts | 69 ++++++++++++++++++++++++++
 src/utils/test.ts                      | 29 +++++++++++
 2 files changed, 98 insertions(+)

diff --git a/src/state/media/MediaViewModel.test.ts b/src/state/media/MediaViewModel.test.ts
index 71475b8c..f64dd3ee 100644
--- a/src/state/media/MediaViewModel.test.ts
+++ b/src/state/media/MediaViewModel.test.ts
@@ -9,6 +9,7 @@ import { expect, onTestFinished, test, vi } from "vitest";
 import {
   type LocalTrackPublication,
   LocalVideoTrack,
+  Track,
   TrackEvent,
 } from "livekit-client";
 import { waitFor } from "@testing-library/dom";
@@ -21,6 +22,7 @@ import {
   mockRemoteMedia,
   withTestScheduler,
   mockRemoteParticipant,
+  mockRemoteScreenShare,
 } from "../../utils/test";
 import { constant } from "../Behavior";
 
@@ -91,6 +93,73 @@ test("control a participant's volume", () => {
   });
 });
 
+test("control a participant's screen share volume", () => {
+  const setVolumeSpy = vi.fn();
+  const vm = mockRemoteScreenShare(
+    rtcMembership,
+    {},
+    mockRemoteParticipant({ setVolume: setVolumeSpy }),
+  );
+  withTestScheduler(({ expectObservable, schedule }) => {
+    schedule("-ab---c---d|", {
+      a() {
+        // Try muting by toggling
+        vm.togglePlaybackMuted();
+        expect(setVolumeSpy).toHaveBeenLastCalledWith(
+          0,
+          Track.Source.ScreenShareAudio,
+        );
+      },
+      b() {
+        // Try unmuting by dragging the slider back up
+        vm.adjustPlaybackVolume(0.6);
+        vm.adjustPlaybackVolume(0.8);
+        vm.commitPlaybackVolume();
+        expect(setVolumeSpy).toHaveBeenCalledWith(
+          0.6,
+          Track.Source.ScreenShareAudio,
+        );
+        expect(setVolumeSpy).toHaveBeenLastCalledWith(
+          0.8,
+          Track.Source.ScreenShareAudio,
+        );
+      },
+      c() {
+        // Try muting by dragging the slider back down
+        vm.adjustPlaybackVolume(0.2);
+        vm.adjustPlaybackVolume(0);
+        vm.commitPlaybackVolume();
+        expect(setVolumeSpy).toHaveBeenCalledWith(
+          0.2,
+          Track.Source.ScreenShareAudio,
+        );
+        expect(setVolumeSpy).toHaveBeenLastCalledWith(
+          0,
+          Track.Source.ScreenShareAudio,
+        );
+      },
+      d() {
+        // Try unmuting by toggling
+        vm.togglePlaybackMuted();
+        // The volume should return to the last non-zero committed volume
+        expect(setVolumeSpy).toHaveBeenLastCalledWith(
+          0.8,
+          Track.Source.ScreenShareAudio,
+        );
+      },
+    });
+    expectObservable(vm.playbackVolume$).toBe("ab(cd)(ef)g", {
+      a: 1,
+      b: 0,
+      c: 0.6,
+      d: 0.8,
+      e: 0.2,
+      f: 0,
+      g: 0.8,
+    });
+  });
+});
+
 test("toggle fit/contain for a participant's video", () => {
   const vm = mockRemoteMedia(rtcMembership, {}, mockRemoteParticipant({}));
   withTestScheduler(({ expectObservable, schedule }) => {
diff --git a/src/utils/test.ts b/src/utils/test.ts
index c1e67927..b99bfa88 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -70,6 +70,10 @@ import {
   createRemoteUserMedia,
   type RemoteUserMediaViewModel,
 } from "../state/media/RemoteUserMediaViewModel";
+import {
+  createRemoteScreenShare,
+  type RemoteScreenShareViewModel,
+} from "../state/media/RemoteScreenShareViewModel";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -393,6 +397,31 @@ export function mockRemoteMedia(
   });
 }
 
+export function mockRemoteScreenShare(
+  rtcMember: CallMembership,
+  roomMember: Partial<RoomMember>,
+  participant: RemoteParticipant | null,
+  livekitRoom: LivekitRoom | undefined = mockLivekitRoom(
+    {},
+    {
+      remoteParticipants$: of(participant ? [participant] : []),
+    },
+  ),
+): RemoteScreenShareViewModel {
+  const member = mockMatrixRoomMember(rtcMember, roomMember);
+  return createRemoteScreenShare(testScope(), {
+    id: "screenshare",
+    userId: member.userId,
+    participant$: constant(participant),
+    encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+    livekitRoom$: constant(livekitRoom),
+    focusUrl$: constant("https://rtc-example.org"),
+    pretendToBeDisconnected$: constant(false),
+    displayName$: constant(member.rawDisplayName ?? "nodisplayname"),
+    mxcAvatarUrl$: constant(member.getMxcAvatarUrl()),
+  });
+}
+
 export function mockConfig(
   config: Partial<ResolvedConfigOptions> = {},
 ): MockInstance<() => ResolvedConfigOptions> {

From b88daf0198619256b4bea54ab640a7cddd26a53e Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 05:07:41 -0600
Subject: [PATCH 04/15] Add tests for screen share volume UI presence logic

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.test.tsx | 93 +++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/src/tile/SpotlightTile.test.tsx b/src/tile/SpotlightTile.test.tsx
index a5332194..8b0b29a7 100644
--- a/src/tile/SpotlightTile.test.tsx
+++ b/src/tile/SpotlightTile.test.tsx
@@ -9,6 +9,7 @@ import { test, expect, vi } from "vitest";
 import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { SpotlightTile } from "./SpotlightTile";
 import {
@@ -18,6 +19,7 @@ import {
   mockLocalMedia,
   mockRemoteMedia,
   mockRemoteParticipant,
+  mockRemoteScreenShare,
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
 import { constant } from "../state/Behavior";
@@ -78,3 +80,94 @@ test("SpotlightTile is accessible", async () => {
   await user.click(screen.getByRole("button", { name: "Expand" }));
   expect(toggleExpanded).toHaveBeenCalled();
 });
+
+test("Screen share volume UI is shown when screen share has audio", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(true));
+
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <TooltipProvider>
+      <SpotlightTile
+        vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+        targetWidth={300}
+        targetHeight={200}
+        expanded={false}
+        onToggleExpanded={toggleExpanded}
+        showIndicators
+        focusable
+      />
+    </TooltipProvider>,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should exist
+  expect(screen.queryByRole("button", { name: /volume/i })).toBeInTheDocument();
+});
+
+test("Screen share volume UI is hidden when screen share has no audio", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(false));
+
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <SpotlightTile
+      vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+      targetWidth={300}
+      targetHeight={200}
+      expanded={false}
+      onToggleExpanded={toggleExpanded}
+      showIndicators
+      focusable
+    />,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should not exist
+  expect(
+    screen.queryByRole("button", { name: /volume/i }),
+  ).not.toBeInTheDocument();
+});
+
+test("Screen share volume UI is hidden in grid mode", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(true));
+
+  const { container } = render(
+    <TooltipProvider>
+      <SpotlightTile
+        vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+        targetWidth={300}
+        targetHeight={200}
+        expanded={false}
+        onToggleExpanded={null} // Grid mode
+        showIndicators
+        focusable
+      />
+    </TooltipProvider>,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should not exist in grid mode
+  expect(
+    screen.queryByRole("button", { name: /volume/i }),
+  ).not.toBeInTheDocument();
+});

From ea074ceb2d278cf12b6f230aa27500c193fde757 Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 13:16:51 -0600
Subject: [PATCH 05/15] Sort translation keys

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 locales/en/app.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/en/app.json b/locales/en/app.json
index 6ec4859e..4a7ce7bc 100644
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -255,8 +255,8 @@
     "expand": "Expand",
     "mute_for_me": "Mute for me",
     "muted_for_me": "Muted for me",
-    "volume": "Volume",
     "screen_share_volume": "Screen share volume",
+    "volume": "Volume",
     "waiting_for_media": "Waiting for media..."
   }
 }

From c74d19ad332b3e8bd22574d8a3c4d69cd1e957b8 Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 13:56:30 -0600
Subject: [PATCH 06/15] Add more guards against undefined

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 93a1fbd9..77f72a2c 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -269,16 +269,17 @@ export const SpotlightTile: FC<Props> = ({
   // isScreenShare only needs to check "audioEnabled$" but I wanted to be more specific
   // just in case more models are added in the future, since screen shares always have video
   const isScreenShare =
-    currentMedia &&
+    currentMedia != null &&
     "audioEnabled$" in currentMedia &&
     "videoEnabled$" in currentMedia;
 
   const hasAudio$ = useBehavior(
-    isScreenShare && currentMedia?.audioEnabled$
+    isScreenShare && (currentMedia as RemoteScreenShareViewModel).audioEnabled$
       ? currentMedia.audioEnabled$
       : constant(false),
   );
-  const isLocalScreenShare = isScreenShare && currentMedia.local;
+  const isLocalScreenShare =
+    isScreenShare && (currentMedia as RemoteScreenShareViewModel)?.local;
   const screenShareLocallyMuted = useBehavior(
     isScreenShare
       ? (currentMedia as RemoteScreenShareViewModel).playbackMuted$

From 99401a7285a1879f45098810e822ca964ec50383 Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 15:13:20 -0600
Subject: [PATCH 07/15] Make screenShareLocallyMuted check safer

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 77f72a2c..411d730e 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -281,7 +281,8 @@ export const SpotlightTile: FC<Props> = ({
   const isLocalScreenShare =
     isScreenShare && (currentMedia as RemoteScreenShareViewModel)?.local;
   const screenShareLocallyMuted = useBehavior(
-    isScreenShare
+    isScreenShare &&
+      (currentMedia as RemoteScreenShareViewModel).playbackMuted$ != null
       ? (currentMedia as RemoteScreenShareViewModel).playbackMuted$
       : constant(false),
   );

From 3216d68470c6324557ab76dcb0d04503961e82d8 Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 16:05:56 -0600
Subject: [PATCH 08/15] Make screenShareVolume safer

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 411d730e..e274877c 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -290,7 +290,7 @@ export const SpotlightTile: FC<Props> = ({
     ? VolumeOffIcon
     : VolumeOnIcon;
   const screenShareVolume = useBehavior(
-    isScreenShare
+    isScreenShare && (currentMedia as RemoteScreenShareViewModel).playbackVolume$ != null
       ? (currentMedia as RemoteScreenShareViewModel).playbackVolume$
       : constant(0),
   );

From 65045c264b417f741e2e9d3e10c3695052a52407 Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 16:11:39 -0600
Subject: [PATCH 09/15] Fix formatting

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index e274877c..b510b603 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -290,7 +290,8 @@ export const SpotlightTile: FC<Props> = ({
     ? VolumeOffIcon
     : VolumeOnIcon;
   const screenShareVolume = useBehavior(
-    isScreenShare && (currentMedia as RemoteScreenShareViewModel).playbackVolume$ != null
+    isScreenShare &&
+      (currentMedia as RemoteScreenShareViewModel).playbackVolume$ != null
       ? (currentMedia as RemoteScreenShareViewModel).playbackVolume$
       : constant(0),
   );

From e99e8628d6f2837907412289ebdf75ab7b98946f Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 17:09:07 -0600
Subject: [PATCH 10/15] Clean up and streamline safety checking instead of
 using multiple separate checks

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index b510b603..7914b63d 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -266,34 +266,33 @@ export const SpotlightTile: FC<Props> = ({
   const canGoBack = visibleIndex > 0;
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
   const currentMedia = media[visibleIndex];
-  // isScreenShare only needs to check "audioEnabled$" but I wanted to be more specific
-  // just in case more models are added in the future, since screen shares always have video
-  const isScreenShare =
-    currentMedia != null &&
+  // only "audioEnabled$" needs to checked but I wanted to be more specific just in
+  // case more models are added in the future, since screen shares always have video
+  const currentScreenShare =
+    currentMedia &&
     "audioEnabled$" in currentMedia &&
-    "videoEnabled$" in currentMedia;
+    "videoEnabled$" in currentMedia
+      ? (currentMedia as RemoteScreenShareViewModel)
+      : null;
+
+  const isScreenShare = currentScreenShare != null;
 
   const hasAudio$ = useBehavior(
-    isScreenShare && (currentMedia as RemoteScreenShareViewModel).audioEnabled$
-      ? currentMedia.audioEnabled$
-      : constant(false),
+    currentScreenShare?.audioEnabled$ ?? constant(false),
   );
-  const isLocalScreenShare =
-    isScreenShare && (currentMedia as RemoteScreenShareViewModel)?.local;
+
+  const isLocalScreenShare = currentScreenShare?.local ?? false;
+
   const screenShareLocallyMuted = useBehavior(
-    isScreenShare &&
-      (currentMedia as RemoteScreenShareViewModel).playbackMuted$ != null
-      ? (currentMedia as RemoteScreenShareViewModel).playbackMuted$
-      : constant(false),
+    currentScreenShare?.playbackMuted$ ?? constant(false),
   );
+
   const ScreenShareVolumeIcon = screenShareLocallyMuted
     ? VolumeOffIcon
     : VolumeOnIcon;
+
   const screenShareVolume = useBehavior(
-    isScreenShare &&
-      (currentMedia as RemoteScreenShareViewModel).playbackVolume$ != null
-      ? (currentMedia as RemoteScreenShareViewModel).playbackVolume$
-      : constant(0),
+    currentScreenShare?.playbackVolume$ ?? constant(0),
   );
 
   const isFullscreen = useCallback((): boolean => {

From 5f2d1c8a7e6b5de29de1a03f5f3d6f122a1e853f Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 17:50:31 -0600
Subject: [PATCH 11/15] Comment typo

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 7914b63d..00eeda9e 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -266,7 +266,7 @@ export const SpotlightTile: FC<Props> = ({
   const canGoBack = visibleIndex > 0;
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
   const currentMedia = media[visibleIndex];
-  // only "audioEnabled$" needs to checked but I wanted to be more specific just in
+  // only "audioEnabled$" needs to be checked but I wanted to be more specific just in
   // case more models are added in the future, since screen shares always have video
   const currentScreenShare =
     currentMedia &&

From c7a16e9dfd31d55f3653799fd567904df536c967 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 6 Mar 2026 23:14:15 +0100
Subject: [PATCH 12/15] Refactor screen share volume button into a component

---
 src/state/media/RemoteScreenShareViewModel.ts |   3 +
 src/tile/SpotlightTile.test.tsx               |  31 ---
 src/tile/SpotlightTile.tsx                    | 186 ++++++++----------
 3 files changed, 88 insertions(+), 132 deletions(-)

diff --git a/src/state/media/RemoteScreenShareViewModel.ts b/src/state/media/RemoteScreenShareViewModel.ts
index 78fc0494..8c46aeb3 100644
--- a/src/state/media/RemoteScreenShareViewModel.ts
+++ b/src/state/media/RemoteScreenShareViewModel.ts
@@ -26,6 +26,9 @@ export interface RemoteScreenShareViewModel
    * Whether this screen share's video should be displayed.
    */
   videoEnabled$: Behavior<boolean>;
+  /**
+   * Whether this screen share should be considered to have an audio track.
+   */
   audioEnabled$: Behavior<boolean>;
 }
 
diff --git a/src/tile/SpotlightTile.test.tsx b/src/tile/SpotlightTile.test.tsx
index 8b0b29a7..aac81b9c 100644
--- a/src/tile/SpotlightTile.test.tsx
+++ b/src/tile/SpotlightTile.test.tsx
@@ -140,34 +140,3 @@ test("Screen share volume UI is hidden when screen share has no audio", async ()
     screen.queryByRole("button", { name: /volume/i }),
   ).not.toBeInTheDocument();
 });
-
-test("Screen share volume UI is hidden in grid mode", async () => {
-  const vm = mockRemoteScreenShare(
-    mockRtcMembership("@alice:example.org", "AAAA"),
-    {},
-    mockRemoteParticipant({}),
-  );
-
-  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(true));
-
-  const { container } = render(
-    <TooltipProvider>
-      <SpotlightTile
-        vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
-        targetWidth={300}
-        targetHeight={200}
-        expanded={false}
-        onToggleExpanded={null} // Grid mode
-        showIndicators
-        focusable
-      />
-    </TooltipProvider>,
-  );
-
-  expect(await axe(container)).toHaveNoViolations();
-
-  // Volume menu button should not exist in grid mode
-  expect(
-    screen.queryByRole("button", { name: /volume/i }),
-  ).not.toBeInTheDocument();
-});
diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 00eeda9e..c209e7be 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -22,6 +22,8 @@ import {
   ChevronRightIcon,
   VolumeOffIcon,
   VolumeOnIcon,
+  VolumeOffSolidIcon,
+  VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
@@ -49,7 +51,7 @@ import { type ScreenShareViewModel } from "../state/media/ScreenShareViewModel";
 import { type RemoteScreenShareViewModel } from "../state/media/RemoteScreenShareViewModel";
 import { type MediaViewModel } from "../state/media/MediaViewModel";
 import { Slider } from "../Slider";
-import { constant } from "../state/Behavior";
+import { platform } from "../Platform";
 
 interface SpotlightItemBaseProps {
   ref?: Ref<HTMLDivElement>;
@@ -229,6 +231,73 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
 
 SpotlightItem.displayName = "SpotlightItem";
 
+interface ScreenShareVolumeButtonProps {
+  vm: RemoteScreenShareViewModel;
+}
+
+const ScreenShareVolumeButton: FC<ScreenShareVolumeButtonProps> = ({ vm }) => {
+  const { t } = useTranslation();
+
+  const audioEnabled = useBehavior(vm.audioEnabled$);
+  const playbackMuted = useBehavior(vm.playbackMuted$);
+  const playbackVolume = useBehavior(vm.playbackVolume$);
+
+  const VolumeIcon = playbackMuted ? VolumeOffIcon : VolumeOnIcon;
+  const VolumeSolidIcon = playbackMuted
+    ? VolumeOffSolidIcon
+    : VolumeOnSolidIcon;
+
+  const [volumeMenuOpen, setVolumeMenuOpen] = useState(false);
+  const onMuteButtonClick = useCallback(() => vm.togglePlaybackMuted(), [vm]);
+  const onVolumeChange = useCallback(
+    (v: number) => vm.adjustPlaybackVolume(v),
+    [vm],
+  );
+  const onVolumeCommit = useCallback(() => vm.commitPlaybackVolume(), [vm]);
+
+  return (
+    audioEnabled && (
+      <Menu
+        open={volumeMenuOpen}
+        onOpenChange={setVolumeMenuOpen}
+        title={t("video_tile.screen_share_volume")}
+        side="top"
+        align="end"
+        trigger={
+          <button
+            className={styles.expand}
+            aria-label={t("video_tile.screen_share_volume")}
+          >
+            <VolumeSolidIcon aria-hidden width={20} height={20} />
+          </button>
+        }
+      >
+        <MenuItem
+          as="div"
+          className={styles.volumeMenuItem}
+          onSelect={null}
+          label={null}
+          hideChevron={true}
+        >
+          <button className={styles.menuMuteButton} onClick={onMuteButtonClick}>
+            <VolumeIcon aria-hidden width={24} height={24} />
+          </button>
+          <Slider
+            className={styles.volumeSlider}
+            label={t("video_tile.volume")}
+            value={playbackVolume}
+            min={0}
+            max={1}
+            step={0.01}
+            onValueChange={onVolumeChange}
+            onValueCommit={onVolumeCommit}
+          />
+        </MenuItem>
+      </Menu>
+    )
+  );
+};
+
 interface Props {
   ref?: Ref<HTMLDivElement>;
   vm: SpotlightTileViewModel;
@@ -263,37 +332,9 @@ export const SpotlightTile: FC<Props> = ({
   const latestMedia = useLatest(media);
   const latestVisibleId = useLatest(visibleId);
   const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
+  const visibleMedia = media.at(visibleIndex);
   const canGoBack = visibleIndex > 0;
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
-  const currentMedia = media[visibleIndex];
-  // only "audioEnabled$" needs to be checked but I wanted to be more specific just in
-  // case more models are added in the future, since screen shares always have video
-  const currentScreenShare =
-    currentMedia &&
-    "audioEnabled$" in currentMedia &&
-    "videoEnabled$" in currentMedia
-      ? (currentMedia as RemoteScreenShareViewModel)
-      : null;
-
-  const isScreenShare = currentScreenShare != null;
-
-  const hasAudio$ = useBehavior(
-    currentScreenShare?.audioEnabled$ ?? constant(false),
-  );
-
-  const isLocalScreenShare = currentScreenShare?.local ?? false;
-
-  const screenShareLocallyMuted = useBehavior(
-    currentScreenShare?.playbackMuted$ ?? constant(false),
-  );
-
-  const ScreenShareVolumeIcon = screenShareLocallyMuted
-    ? VolumeOffIcon
-    : VolumeOnIcon;
-
-  const screenShareVolume = useBehavior(
-    currentScreenShare?.playbackVolume$ ?? constant(0),
-  );
 
   const isFullscreen = useCallback((): boolean => {
     const rootElement = document.body;
@@ -362,7 +403,6 @@ export const SpotlightTile: FC<Props> = ({
   }, [latestVisibleId, latestMedia, setScrollToId]);
 
   const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
-  const [openVolumeMenu, setOpenVolumeMenu] = useState(false);
 
   return (
     <animated.div
@@ -400,77 +440,21 @@ export const SpotlightTile: FC<Props> = ({
           />
         ))}
       </div>
-      <div className={styles.bottomRightButtons}>
-        {/*
-          Show volume slider only when the tile is a screenshare, has audio,
-          is in spotlight mode, and isn't your own screen share.
-        */}
-        {isScreenShare &&
-          hasAudio$ &&
-          onToggleExpanded &&
-          !isLocalScreenShare && (
-            <Menu
-              open={openVolumeMenu}
-              onOpenChange={setOpenVolumeMenu}
-              title={t("video_tile.screen_share_volume")}
-              side="top"
-              align="end"
-              trigger={
-                <button
-                  className={classNames(styles.expand)}
-                  aria-label={t("video_tile.screen_share_volume")}
-                >
-                  <ScreenShareVolumeIcon aria-hidden width={20} height={20} />
-                </button>
-              }
-            >
-              <MenuItem
-                as="div"
-                className={styles.volumeMenuItem}
-                onSelect={null}
-                label={null}
-                hideChevron={true}
-              >
-                <button
-                  className={styles.menuMuteButton}
-                  onClick={() => {
-                    (
-                      currentMedia as RemoteScreenShareViewModel
-                    ).togglePlaybackMuted();
-                  }}
-                >
-                  <ScreenShareVolumeIcon aria-hidden width={24} height={24} />
-                </button>
-                <Slider
-                  className={styles.volumeSlider}
-                  label={t("video_tile.volume")}
-                  value={screenShareVolume}
-                  min={0}
-                  max={1}
-                  step={0.01}
-                  onValueChange={(v) =>
-                    (
-                      currentMedia as RemoteScreenShareViewModel
-                    ).adjustPlaybackVolume(v)
-                  }
-                  onValueCommit={() =>
-                    (
-                      currentMedia as RemoteScreenShareViewModel
-                    ).commitPlaybackVolume()
-                  }
-                />
-              </MenuItem>
-            </Menu>
-          )}
-        <button
-          className={classNames(styles.expand)}
-          aria-label={"maximise"}
-          onClick={onToggleFullscreen}
-          tabIndex={focusable ? undefined : -1}
-        >
-          <FullScreenIcon aria-hidden width={20} height={20} />
-        </button>
 
+      <div className={styles.bottomRightButtons}>
+        {visibleMedia?.type === "screen share" && !visibleMedia.local && (
+          <ScreenShareVolumeButton vm={visibleMedia} />
+        )}
+        {platform === "desktop" && (
+          <button
+            className={classNames(styles.expand)}
+            aria-label={"maximise"}
+            onClick={onToggleFullscreen}
+            tabIndex={focusable ? undefined : -1}
+          >
+            <FullScreenIcon aria-hidden width={20} height={20} />
+          </button>
+        )}
         {onToggleExpanded && (
           <button
             className={classNames(styles.expand)}

From 3bbbac23a0b16a35779fe501c42b39b1de7bc063 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 6 Mar 2026 23:15:59 +0100
Subject: [PATCH 13/15] Adjust dimensions of screen share volume menu

---
 src/tile/SpotlightTile.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css
index 43c3d53c..178d13f3 100644
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -110,6 +110,7 @@ Please see LICENSE in the repository root for full details.
 
 .volumeSlider {
   width: 100%;
+  min-width: 172px;
 }
 
 /* Disable the hover effect for the screen share volume menu button */
@@ -123,8 +124,10 @@ Please see LICENSE in the repository root for full details.
 }
 
 .menuMuteButton {
+  appearance: none;
   background: none;
   border: none;
+  padding: 0;
   cursor: pointer;
   display: flex;
 }

From 313b8285d914ded2777323f845247cc6ea1de70c Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 9 Mar 2026 10:30:42 +0100
Subject: [PATCH 14/15] Make the screen share volume button accessible on
 mobile

In landscape orientation the button would be buried underneath the footer, which would block interaction with it. This commit changes the footer to not show in cases where a button has been pressed.
---
 src/room/InCallView.module.css    |  1 +
 src/room/InCallView.tsx           | 67 ++++++++-----------------------
 src/room/LayoutToggle.tsx         | 12 +-----
 src/tile/SpotlightTile.module.css |  9 +++--
 4 files changed, 26 insertions(+), 63 deletions(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 96b8a368..55724932 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -65,6 +65,7 @@ Please see LICENSE in the repository root for full details.
 .footer.overlay.hidden {
   display: grid;
   opacity: 0;
+  pointer-events: none;
 }
 
 .footer.overlay:has(:focus-visible) {
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 135745eb..aceb07cf 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -9,8 +9,8 @@ import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
-  type PointerEvent,
-  type TouchEvent,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -110,8 +110,6 @@ import { ObservableScope } from "../state/ObservableScope.ts";
 
 const logger = rootLogger.getChild("[InCallView]");
 
-const maxTapDurationMs = 400;
-
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
   "vm" | "livekitRoom" | "connState"
@@ -334,40 +332,20 @@ export const InCallView: FC<InCallViewProps> = ({
     ) : null;
   }, [ringOverlay]);
 
-  // Ideally we could detect taps by listening for click events and checking
-  // that the pointerType of the event is "touch", but this isn't yet supported
-  // in Safari: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#browser_compatibility
-  // Instead we have to watch for sufficiently fast touch events.
-  const touchStart = useRef<number | null>(null);
-  const onTouchStart = useCallback(() => (touchStart.current = Date.now()), []);
-  const onTouchEnd = useCallback(() => {
-    const start = touchStart.current;
-    if (start !== null && Date.now() - start <= maxTapDurationMs)
-      vm.tapScreen();
-    touchStart.current = null;
-  }, [vm]);
-  const onTouchCancel = useCallback(() => (touchStart.current = null), []);
-
-  // We also need to tell the footer controls to prevent touch events from
-  // bubbling up, or else the footer will be dismissed before a click/change
-  // event can be registered on the control
-  const onControlsTouchEnd = useCallback(
-    (e: TouchEvent) => {
-      // Somehow applying pointer-events: none to the controls when the footer
-      // is hidden is not enough to stop clicks from happening as the footer
-      // becomes visible, so we check manually whether the footer is shown
-      if (showFooter) {
-        e.stopPropagation();
-        vm.tapControls();
-      } else {
-        e.preventDefault();
-      }
+  const onViewClick = useCallback(
+    (e: ReactMouseEvent) => {
+      if (
+        (e.nativeEvent as PointerEvent).pointerType === "touch" &&
+        // If an interactive element was tapped, don't count this as a tap on the screen
+        (e.target as Element).closest?.("button, input") === null
+      )
+        vm.tapScreen();
     },
-    [vm, showFooter],
+    [vm],
   );
 
   const onPointerMove = useCallback(
-    (e: PointerEvent) => {
+    (e: ReactPointerEvent) => {
       if (e.pointerType === "mouse") vm.hoverScreen();
     },
     [vm],
@@ -667,7 +645,6 @@ export const InCallView: FC<InCallViewProps> = ({
       key="audio"
       muted={!audioEnabled}
       onClick={toggleAudio ?? undefined}
-      onTouchEnd={onControlsTouchEnd}
       disabled={toggleAudio === null}
       data-testid="incall_mute"
     />,
@@ -675,7 +652,6 @@ export const InCallView: FC<InCallViewProps> = ({
       key="video"
       muted={!videoEnabled}
       onClick={toggleVideo ?? undefined}
-      onTouchEnd={onControlsTouchEnd}
       disabled={toggleVideo === null}
       data-testid="incall_videomute"
     />,
@@ -687,7 +663,6 @@ export const InCallView: FC<InCallViewProps> = ({
         className={styles.shareScreen}
         enabled={sharingScreen}
         onClick={vm.toggleScreenSharing}
-        onTouchEnd={onControlsTouchEnd}
         data-testid="incall_screenshare"
       />,
     );
@@ -699,18 +674,11 @@ export const InCallView: FC<InCallViewProps> = ({
         key="raise_hand"
         className={styles.raiseHand}
         identifier={`${client.getUserId()}:${client.getDeviceId()}`}
-        onTouchEnd={onControlsTouchEnd}
       />,
     );
   }
   if (layout.type !== "pip")
-    buttons.push(
-      <SettingsButton
-        key="settings"
-        onClick={openSettings}
-        onTouchEnd={onControlsTouchEnd}
-      />,
-    );
+    buttons.push(<SettingsButton key="settings" onClick={openSettings} />);
 
   buttons.push(
     <EndCallButton
@@ -718,7 +686,6 @@ export const InCallView: FC<InCallViewProps> = ({
       onClick={function (): void {
         vm.hangup();
       }}
-      onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
     />,
   );
@@ -751,7 +718,6 @@ export const InCallView: FC<InCallViewProps> = ({
           className={styles.layout}
           layout={gridMode}
           setLayout={setGridMode}
-          onTouchEnd={onControlsTouchEnd}
         />
       )}
     </div>
@@ -760,12 +726,13 @@ export const InCallView: FC<InCallViewProps> = ({
   const allConnections = useBehavior(vm.allConnections$);
 
   return (
+    // The onClick handler here exists to control the visibility of the footer,
+    // and the footer is also viewable by moving focus into it, so this is fine.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
       className={styles.inRoom}
       ref={containerRef}
-      onTouchStart={onTouchStart}
-      onTouchEnd={onTouchEnd}
-      onTouchCancel={onTouchCancel}
+      onClick={onViewClick}
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx
index 6cddc95f..ca6aa467 100644
--- a/src/room/LayoutToggle.tsx
+++ b/src/room/LayoutToggle.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, type TouchEvent, useCallback } from "react";
+import { type ChangeEvent, type FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {
@@ -22,15 +22,9 @@ interface Props {
   layout: Layout;
   setLayout: (layout: Layout) => void;
   className?: string;
-  onTouchEnd?: (e: TouchEvent) => void;
 }
 
-export const LayoutToggle: FC<Props> = ({
-  layout,
-  setLayout,
-  className,
-  onTouchEnd,
-}) => {
+export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
   const { t } = useTranslation();
 
   const onChange = useCallback(
@@ -47,7 +41,6 @@ export const LayoutToggle: FC<Props> = ({
           value="spotlight"
           checked={layout === "spotlight"}
           onChange={onChange}
-          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <SpotlightIcon aria-hidden width={24} height={24} />
@@ -58,7 +51,6 @@ export const LayoutToggle: FC<Props> = ({
           value="grid"
           checked={layout === "grid"}
           onChange={onChange}
-          onTouchEnd={onTouchEnd}
         />
       </Tooltip>
       <GridIcon aria-hidden width={24} height={24} />
diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css
index 178d13f3..fe13f906 100644
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -84,7 +84,6 @@ Please see LICENSE in the repository root for full details.
 .expand {
   appearance: none;
   cursor: pointer;
-  opacity: 0;
   padding: var(--cpd-space-2x);
   border: none;
   border-radius: var(--cpd-radius-pill-effect);
@@ -148,17 +147,21 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-.expand:active {
+.expand:active, .expand[data-state="open"] {
   background: var(--cpd-color-gray-100);
 }
 
 @media (hover) {
+  .tile > div > button {
+    opacity: 0;
+  }
   .tile:hover > div > button {
     opacity: 1;
   }
 }
 
-.tile:has(:focus-visible) > div > button {
+.tile:has(:focus-visible) > div > button,
+.tile > div:has([data-state="open"]) > button {
   opacity: 1;
 }
 

From 885a523e9189aa41bb83045f36e7fe9b0bdafe9b Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 9 Mar 2026 10:44:22 +0100
Subject: [PATCH 15/15] Fix formatting

---
 src/tile/SpotlightTile.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tile/SpotlightTile.module.css b/src/tile/SpotlightTile.module.css
index fe13f906..af0e0add 100644
--- a/src/tile/SpotlightTile.module.css
+++ b/src/tile/SpotlightTile.module.css
@@ -147,7 +147,8 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-.expand:active, .expand[data-state="open"] {
+.expand:active,
+.expand[data-state="open"] {
   background: var(--cpd-color-gray-100);
 }