(feat): add ability to hide users in focused call view

(feat): add small avatars with tooltips instead of usernames in the top bar in calls (fix): a lot of layout issues (qol): update todo
2026-05-09 20:50:28 +02:00 · 2026-05-09 20:50:28 +02:00 · 6840e04118
commit 6840e04118
parent bd1622d63a
9 changed files with 382 additions and 71 deletions
--- a/packages/call/src/components/actions.tsx
+++ b/packages/call/src/components/actions.tsx
@ -6,18 +6,22 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from "@tensamin/ui";
+import { useEffect, useState } from "react";
 import MuteButton from "./buttons/mute";
 import DeafButton from "./buttons/deaf";
 import ScreenshareButton from "./buttons/screenshare";
 import LeaveButton from "./buttons/leave";
 import {
  setCallIsPopout,
+  setUsersInFocusedViewHidden,
  stopWatchingFocusedStream,
  triggerCallLayoutCalculation,
  useCall,
 } from "../store";
 import InviteButton from "./buttons/invite";
 import {
+  ChevronDown,
+  ChevronUp,
  Maximize,
  Minimize,
  SquareArrowOutDownLeft,
@ -37,9 +41,15 @@ export default function Actions() {
    focusedParticipantId != null &&
    watchedStreamParticipantIds.includes(focusedParticipantId);

+  // Fullscreen stuff
  const callIsPopout = useCall((state) => state.callIsPopout);
  const callIsFullscreen = useCall((state) => state.callIsFullscreen);
  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);

  const toggleFullscreen = async () => {
    if (callIsFullscreen) {
@ -51,18 +61,93 @@ export default function Actions() {
    triggerCallLayoutCalculation();
  };

+  // Hide users in focused view
+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+
  return (
    <div className="w-full flex justify-between items-center">
-      <div className="w-30" />
+      <div className="w-30 flex justify-start">
+        {view === "focused" && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  onClick={() =>
+                    setUsersInFocusedViewHidden(!usersInFocusedViewHidden)
+                  }
+                  variant="link"
+                  className="w-11 h-11 p-0! ml-3 text-foreground"
+                >
+                  {usersInFocusedViewHidden ? (
+                    <ChevronUp className="size-6" />
+                  ) : (
+                    <ChevronDown className="size-6" />
+                  )}
+                </Button>
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Hide users
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
      <Card className="p-1.75">
        <CardContent className="p-0! flex gap-1.75">
-          <MuteButton className={sharedClasses} iconSize={sharedIconSize} />
-          <DeafButton className={sharedClasses} iconSize={sharedIconSize} />
-          <ScreenshareButton
-            className={sharedClasses}
-            iconSize={sharedIconSize}
-          />
-          <InviteButton className={sharedClasses} iconSize={sharedIconSize} />
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <MuteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Mute
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <DeafButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Deafen
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <ScreenshareButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Screenshare
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InviteButton
+                  className={sharedClasses}
+                  iconSize={sharedIconSize}
+                />
+              }
+            />
+            <TooltipContent portalProps={{ container: portalContainer }}>
+              Invite
+            </TooltipContent>
+          </Tooltip>
          {isWatchingFocusedStream ? (
            <Button
              className="h-10"
@ -93,7 +178,9 @@ export default function Actions() {
              </Button>
            }
          />
-          <TooltipContent>Popout</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Popout
+          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
@ -113,7 +200,9 @@ export default function Actions() {
              </Button>
            }
          />
-          <TooltipContent>Fullscreen</TooltipContent>
+          <TooltipContent portalProps={{ container: portalContainer }}>
+            Fullscreen
+          </TooltipContent>
        </Tooltip>
      </div>
    </div>
--- a/packages/call/src/components/modals/base.tsx
+++ b/packages/call/src/components/modals/base.tsx
@ -90,10 +90,12 @@ function Overlay({
 export default function Base({
  participant,
  type,
+  fill = false,
  flush = false,
 }: {
  participant: Participant | undefined;
  type: "user" | "stream";
+  fill?: boolean;
  flush?: boolean;
 }) {
  const { get } = useUser();
@ -170,9 +172,9 @@ export default function Base({
        render={
          <div
            onClick={onClick}
-            className={`relative aspect-video w-full border-2 ${
-              flush ? "rounded-none border-x-0" : "rounded-md"
-            }`}
+            className={`relative w-full ${fill ? "h-full border-0" : "aspect-video border-2"} ${
+              flush || fill ? "rounded-none" : "rounded-md"
+            } ${flush && !fill ? "border-x-0" : ""}`}
          >
            <div className="z-20 absolute bottom-0 left-0 w-full h-full flex justify-start items-end p-2">
              <>
@ -219,6 +221,7 @@ export default function Base({
              {type === "stream" &&
                (showStream ? (
                  <VideoViewer
+                    fill={fill}
                    flush={flush}
                    participantId={participant.identity}
                    publication={screenSharePublication}
--- a/packages/call/src/components/sidebarBox.tsx
+++ b/packages/call/src/components/sidebarBox.tsx
@ -20,12 +20,18 @@ import LeaveButton from "./buttons/leave";

 export default function SidebarBox() {
  const state = useCall((store) => store.state);
+  const screenRef = useCall((store) => store.screenRef);
  const isMobile = useIsMobile();
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);

  return state === "closed" ? null : (
    <Card className="p-1.5 gap-2" hidden={isMobile}>
      <CardHeader className="p-0! pb-2! border-b-2">
-        <ConnectionBar />
+        <ConnectionBar portalContainer={portalContainer} />
      </CardHeader>
      <CardContent className="p-0! flex flex-col gap-1">
        <div className="flex justify-start gap-1">
@ -39,7 +45,11 @@ export default function SidebarBox() {
  );
 }

-function ConnectionBar() {
+function ConnectionBar({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
  const state = useCall((store) => store.state);
  const isEncrypted = useCall((store) => store.isEncrypted);
  const callId = useCall((store) => store.callId);
@ -62,7 +72,7 @@ function ConnectionBar() {
            {state === "closed" && "Closed"}
            {state === "closing" && "Closing"}

-            <TinyPingGraph />
+            <TinyPingGraph portalContainer={portalContainer} />

            {isEncrypted ? (
              <Lock color="var(--primary-foreground-alt)" />
@ -72,12 +82,18 @@ function ConnectionBar() {
          </Button>
        }
      />
-      <TooltipContent>Click to open call page</TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        Click to open call page
+      </TooltipContent>
    </Tooltip>
  );
 }

-export function TinyPingGraph() {
+export function TinyPingGraph({
+  portalContainer,
+}: {
+  portalContainer?: HTMLElement;
+}) {
  const room = useCall((store) => store.room);

  const [mapData, setMapData] = useState<Map<number, number>>(() => new Map());
@ -164,7 +180,7 @@ export function TinyPingGraph() {
          </div>
        }
      />
-      <TooltipContent>
+      <TooltipContent portalProps={{ container: portalContainer }}>
        {data.length > 0 ? `${data.at(-1)?.ping} ms` : "Measuring ping..."}
      </TooltipContent>
    </Tooltip>
--- a/packages/call/src/components/top.tsx
+++ b/packages/call/src/components/top.tsx
@ -1,11 +1,26 @@
 import { useUser, type User } from "@tensamin/user/context";
 import { useCall } from "../store";
 import { useEffect, useState } from "react";
+import { useStorage } from "@tensamin/storage/context";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";

 export default function TopBar() {
  const { get } = useUser();
+  const { load } = useStorage();
  const room = useCall((state) => state.room);
-  const view = useCall((state) => state.view);
+  const screenRef = useCall((state) => state.screenRef);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setPortalContainer(screenRef?.current ?? undefined);
+  }, [screenRef]);

  const userIds = Array.from(
    room.remoteParticipants.values(),
@ -25,34 +40,58 @@ export default function TopBar() {
    const ids = userIdsKey === "" ? [] : userIdsKey.split(",").map(Number);

    void Promise.all(ids.map((id) => get(id)))
-      .then((users) => {
+      .then(async (users) => {
        if (!active) {
          return;
        }

-        setUsers(users);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser, ...users]);
      })
-      .catch(() => {
+      .catch(async () => {
        if (!active) {
          return;
        }

-        setUsers([]);
+        const ownId = await load("user_id");
+        const ownUser = await get(ownId);
+
+        setUsers([ownUser]);
      });

    return () => {
      active = false;
    };
-  }, [get, userIdsKey]);
+  }, [get, userIdsKey, load]);

  return (
    <div className="w-full flex justify-between h-12">
-      <div className="flex gap-1">
+      <div className="flex gap-1 m-3 ml-7">
        {users.map((user) => (
-          <div key={user.user_id}>{user.display}</div>
+          <div key={user.user_id} className="-ml-4">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Avatar className="size-7">
+                    <AvatarImage />
+                    <AvatarFallback className="text-xs">
+                      {user.display.slice(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                }
+              />
+              <TooltipContent
+                side="bottom"
+                portalProps={{ container: portalContainer }}
+              >
+                {user.display}
+              </TooltipContent>
+            </Tooltip>
+          </div>
        ))}
      </div>
-      {view}
    </div>
  );
 }
--- a/packages/call/src/components/videoViewer.tsx
+++ b/packages/call/src/components/videoViewer.tsx
@ -6,11 +6,13 @@ import { Loader2 } from "lucide-react";

 export default function VideoViewer({
  className,
+  fill = false,
  flush = false,
  publication,
  participantId,
 }: {
  className?: string;
+  fill?: boolean;
  flush?: boolean;
  publication: TrackPublication;
  participantId: string;
@ -28,7 +30,7 @@ export default function VideoViewer({
    <VideoTrack
      trackRef={trackRef}
      className={cn(
-        "w-full h-full aspect-video bg-black",
+        fill ? "w-full h-full bg-black" : "w-full h-full aspect-video bg-black",
        flush ? "rounded-none" : "rounded-md",
        className,
      )}
--- a/packages/call/src/store.tsx
+++ b/packages/call/src/store.tsx
@ -86,6 +86,7 @@ type CallStore = {
  screenShareEnabled: boolean;
  screenShareSession: ScreenShareSession | null;
  focusedParticipantId: number | null;
+  usersInFocusedViewHidden: boolean;
  watchedStreamParticipantIds: number[];
  pendingWatchedParticipantIds: number[];
  activeScreenShareParticipantIds: number[];
@ -508,6 +509,18 @@ export function setCallView(view: CallView) {
  useCall.setState({ view });
 }

+export function setUsersInFocusedViewHidden(
+  usersInFocusedViewHidden: boolean,
+) {
+  useCall.setState((state) => ({
+    usersInFocusedViewHidden,
+    layoutVersion:
+      state.usersInFocusedViewHidden === usersInFocusedViewHidden
+        ? state.layoutVersion
+        : state.layoutVersion + 1,
+  }));
+}
+
 export function setCallIsFullscreen(callIsFullscreen: boolean) {
  useCall.setState({ callIsFullscreen });
 }
@ -771,6 +784,7 @@ export async function disconnect() {
    view: "preview",
    screenShareSession: null,
    focusedParticipantId: null,
+    usersInFocusedViewHidden: false,
    watchedStreamParticipantIds: [],
    pendingWatchedParticipantIds: [],
    activeScreenShareParticipantIds: [],
@ -928,6 +942,7 @@ export function resetCallState() {
    deaf: false,
    screenShareSession: null,
    focusedParticipantId: null,
+    usersInFocusedViewHidden: false,
    watchedStreamParticipantIds: [],
    pendingWatchedParticipantIds: [],
    activeScreenShareParticipantIds: [],
@ -969,6 +984,7 @@ export const useCall = create<CallStore>(() => ({
  screenShareEnabled: room.localParticipant.isScreenShareEnabled,
  screenShareSession: null,
  focusedParticipantId: null,
+  usersInFocusedViewHidden: false,
  watchedStreamParticipantIds: [],
  pendingWatchedParticipantIds: [],
  activeScreenShareParticipantIds: [],
--- a/packages/call/src/views/main/focused.tsx
+++ b/packages/call/src/views/main/focused.tsx
@ -3,7 +3,6 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useCall } from "../../store";
 import Base from "../../components/modals/base";

-const TILE_ASPECT_RATIO = 16 / 9;
 const SECONDARY_ROW_HEIGHT_PX = 180;
 const STACK_GAP_PX = 12;

@ -11,15 +10,17 @@ export default function View() {
  const room = useCall((state) => state.room);
  const layoutVersion = useCall((state) => state.layoutVersion);

+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+  const callIsFullscreen = useCall((state) => state.callIsFullscreen);
+
  const focusedParticipantId = useCall((state) => state.focusedParticipantId);
  const activeScreenShareParticipantIds = useCall(
    (state) => state.activeScreenShareParticipantIds,
  );
  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [focusedTileSize, setFocusedTileSize] = useState({
-    width: 0,
-    height: 0,
-  });
+  const focusedTileRef = useRef<HTMLDivElement | null>(null);
  const [isFocusedTileFlush, setIsFocusedTileFlush] = useState(false);
  const [participantVersion, setParticipantVersion] = useState(0);

@ -97,47 +98,47 @@ export default function View() {

  useLayoutEffect(() => {
    const container = containerRef.current;
+    const focusedTile = focusedTileRef.current;

-    if (!container) {
+    if (!container || !focusedTile) {
      return;
    }

-    const syncTileLayout = () => {
-      const rect = container.getBoundingClientRect();
-      const width = Math.max(0, Math.floor(window.innerWidth + 1 - rect.left));
-      const height = Math.max(0, Math.floor(container.clientHeight));
-      const reservedHeight =
-        tiles.length > 0 ? SECONDARY_ROW_HEIGHT_PX + STACK_GAP_PX : 0;
-      const availableHeight = Math.max(0, height - reservedHeight);
-      const nextWidth = Math.max(
-        0,
-        Math.min(width, availableHeight * TILE_ASPECT_RATIO),
-      );
-      const nextHeight = Math.max(0, nextWidth / TILE_ASPECT_RATIO);
-      const widthDelta = Math.abs(width - nextWidth);
+    let frameId = 0;

-      setFocusedTileSize((current) =>
-        current.width === nextWidth && current.height === nextHeight
-          ? current
-          : { width: nextWidth, height: nextHeight },
-      );
-      setIsFocusedTileFlush(widthDelta <= 1);
+    const syncTileLayout = () => {
+      const containerWidth = Math.floor(container.getBoundingClientRect().width);
+      const tileWidth = Math.floor(focusedTile.getBoundingClientRect().width);
+
+      setIsFocusedTileFlush(Math.abs(containerWidth - tileWidth) <= 1);
+    };
+
+    const scheduleSyncTileLayout = () => {
+      cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(syncTileLayout);
    };

    syncTileLayout();

    const observer = new ResizeObserver(() => {
-      requestAnimationFrame(syncTileLayout);
+      scheduleSyncTileLayout();
    });
    observer.observe(container);
+    observer.observe(focusedTile);

-    window.addEventListener("resize", syncTileLayout);
+    window.addEventListener("resize", scheduleSyncTileLayout);

    return () => {
      observer.disconnect();
-      window.removeEventListener("resize", syncTileLayout);
+      cancelAnimationFrame(frameId);
+      window.removeEventListener("resize", scheduleSyncTileLayout);
    };
-  }, [layoutVersion, tiles.length, focusedParticipantId]);
+  }, [
+    layoutVersion,
+    tiles.length,
+    focusedParticipantId,
+    usersInFocusedViewHidden,
+  ]);

  if (focusedParticipantId == null) {
    return null;
@ -154,20 +155,32 @@ export default function View() {
  const focusedParticipant = getParticipantById(focusedParticipantId);
  const focusedParticipantHasActiveScreenShare =
    activeScreenShareParticipantIdSet.has(focusedParticipantId);
+  const isImmersiveFocusedView =
+    callIsFullscreen && usersInFocusedViewHidden;

  return (
    <div
      ref={containerRef}
-      className="flex h-full w-full items-center justify-center overflow-hidden"
+      className="flex h-full w-full overflow-hidden"
    >
      <div
-        className="flex max-h-full w-full flex-col items-center overflow-hidden"
-        style={{ gap: tiles.length > 0 ? STACK_GAP_PX : 0 }}
+        className="flex h-full w-full flex-col items-center overflow-hidden"
+        style={{
+          gap: tiles.length > 0 && !isImmersiveFocusedView ? STACK_GAP_PX : 0,
+        }}
      >
-        <div className="w-full flex justify-center overflow-hidden">
-          <div className="overflow-hidden" style={focusedTileSize}>
+        <div className="flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
+          <div
+            ref={focusedTileRef}
+            className={
+              isImmersiveFocusedView
+                ? "h-full w-full overflow-hidden"
+                : "h-full max-w-full aspect-video overflow-hidden"
+            }
+          >
            <Base
-              flush={isFocusedTileFlush}
+              fill={isImmersiveFocusedView}
+              flush={isImmersiveFocusedView || isFocusedTileFlush}
              type={focusedParticipantHasActiveScreenShare ? "stream" : "user"}
              participant={focusedParticipant}
            />
@ -175,6 +188,7 @@ export default function View() {
        </div>
        {tiles.length > 0 && (
          <div
+            hidden={usersInFocusedViewHidden}
            className="w-full shrink-0 flex justify-center gap-2 overflow-x-auto"
            style={{ height: SECONDARY_ROW_HEIGHT_PX }}
          >
--- a/packages/call/src/views/main/layout.tsx
+++ b/packages/call/src/views/main/layout.tsx
@ -1,24 +1,156 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import Actions from "../../components/actions";
 import TopBar from "../../components/top";
-import { setScreenRef } from "../../store";
+import { setScreenRef, useCall } from "../../store";

 export default function Layout({ children }: { children: React.ReactNode }) {
  const screenRef = useRef<HTMLDivElement>(null);
+  const topBarRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const hideChromeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [overlayInsets, setOverlayInsets] = useState({ top: 0, bottom: 0 });
+  const [isImmersiveChromeVisible, setIsImmersiveChromeVisible] = useState(false);

  useEffect(() => {
    setScreenRef(screenRef);
  }, []);

+  const usersInFocusedViewHidden = useCall(
+    (state) => state.usersInFocusedViewHidden,
+  );
+  const view = useCall((state) => state.view);
+  const callIsFullscreen = useCall((state) => state.callIsFullscreen);
+  const isImmersiveFocusedView =
+    callIsFullscreen && view === "focused" && usersInFocusedViewHidden;
+  const immersiveChromeVisible =
+    isImmersiveFocusedView && isImmersiveChromeVisible;
+
+  useEffect(() => {
+    if (!isImmersiveFocusedView) {
+      if (hideChromeTimeoutRef.current) {
+        clearTimeout(hideChromeTimeoutRef.current);
+        hideChromeTimeoutRef.current = null;
+      }
+    }
+  }, [isImmersiveFocusedView]);
+
+  useEffect(() => {
+    return () => {
+      if (hideChromeTimeoutRef.current) {
+        clearTimeout(hideChromeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const topBar = topBarRef.current;
+    const actions = actionsRef.current;
+
+    if (!topBar || !actions) {
+      return;
+    }
+
+    const syncOverlayInsets = () => {
+      setOverlayInsets({
+        top: Math.ceil(topBar.getBoundingClientRect().height),
+        bottom: Math.ceil(actions.getBoundingClientRect().height),
+      });
+    };
+
+    syncOverlayInsets();
+
+    const observer = new ResizeObserver(syncOverlayInsets);
+    observer.observe(topBar);
+    observer.observe(actions);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const scheduleChromeHide = () => {
+    if (hideChromeTimeoutRef.current) {
+      clearTimeout(hideChromeTimeoutRef.current);
+    }
+
+    hideChromeTimeoutRef.current = setTimeout(() => {
+      setIsImmersiveChromeVisible(false);
+      hideChromeTimeoutRef.current = null;
+    }, 3000);
+  };
+
+  const showImmersiveChrome = () => {
+    if (!isImmersiveFocusedView) {
+      return;
+    }
+
+    setIsImmersiveChromeVisible(true);
+    scheduleChromeHide();
+  };
+
+  const hideImmersiveChrome = () => {
+    if (hideChromeTimeoutRef.current) {
+      clearTimeout(hideChromeTimeoutRef.current);
+      hideChromeTimeoutRef.current = null;
+    }
+
+    setIsImmersiveChromeVisible(false);
+  };
+
  return (
-    <div ref={screenRef} className="w-full h-full flex flex-col">
-      <div className="shrink-0">
+    <div
+      ref={screenRef}
+      className={`relative w-full h-full flex flex-col ${
+        isImmersiveFocusedView && !immersiveChromeVisible ? "cursor-none" : ""
+      }`}
+      onMouseEnter={showImmersiveChrome}
+      onMouseMove={showImmersiveChrome}
+      onMouseLeave={hideImmersiveChrome}
+    >
+      <div
+        ref={topBarRef}
+        className={`shrink-0 w-full z-20 transition-all duration-200 ${
+          isImmersiveFocusedView
+            ? immersiveChromeVisible
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 -translate-y-2 pointer-events-none"
+            : "opacity-100 translate-y-0"
+        }`}
+        style={{
+          position: usersInFocusedViewHidden ? "absolute" : "relative",
+          top: 0,
+          left: 0,
+        }}
+      >
        <TopBar />
      </div>
-      <div className="min-h-0 flex-1 w-full flex justify-center items-center overflow-hidden">
+      <div
+        className="min-h-0 flex-1 w-full flex justify-center items-center overflow-hidden"
+        style={
+          usersInFocusedViewHidden && !isImmersiveFocusedView
+            ? {
+                paddingTop: overlayInsets.top,
+                paddingBottom: overlayInsets.bottom,
+              }
+            : undefined
+        }
+      >
        {children}
      </div>
-      <div className="shrink-0 pb-4.5 pt-3">
+      <div
+        ref={actionsRef}
+        className={`shrink-0 pb-4.5 pt-3 bottom-0 w-full z-20 transition-all duration-200 ${
+          isImmersiveFocusedView
+            ? immersiveChromeVisible
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 translate-y-2 pointer-events-none"
+            : "opacity-100 translate-y-0"
+        }`}
+        style={{
+          position: usersInFocusedViewHidden ? "absolute" : "relative",
+          left: 0,
+        }}
+      >
        <Actions />
      </div>
    </div>