From 15ca2b41b4af17eac8b3cc6980f67b0676e9e2aa Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 21 Aug 2026 14:16:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20use=20state=20instead?=
 =?UTF-8?q?=20of=20a=20ref=20for=20MoreControls=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After the recent refactoring, `MoreControls` only renders once. On
that first render, the container ref is `null`, and when it later
gets a reference to the div, the ref update does not trigger a
re-render.

As a result, the additional controls were never showing up.

Switch from a ref to a state to track the container element. State
updates do trigger a re-render, so the controls now show as
expected once the container is available.
---
 CHANGELOG.md                                        |  1 +
 .../prefabs/ControlBar/DesktopControlBar.tsx        | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6b955b6..2d08eb06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to
 - ⬆️(backend) bump sqlparse from 0.5.5 to 0.6.0
 - ⬆️(mail) bump @html-to/text-cli from 0.6.0 to 0.6.1
 - 🐛(frontend) treat client-initiated connect aborts as events
+- 🐛(frontend) use state instead of a ref for MoreControls container
 
 ## [1.27.0] - 2026-08-14
 
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
index 975b8338..fe2d70a4 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
@@ -9,7 +9,7 @@ import { SubtitlesToggle } from '../../components/controls/SubtitlesToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+import { RefObject, useMemo, useState } from 'react'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
@@ -21,7 +21,14 @@ export function DesktopControlBar({
   onDeviceError,
 }: Readonly<ControlBarAuxProps>) {
   const browserSupportsScreenSharing = supportsScreenSharing()
-  const desktopControlBarEl = useRef<HTMLDivElement>(null)
+
+  const [controlBarElement, setControlBarElement] =
+    useState<HTMLDivElement | null>(null)
+
+  const desktopControlBarEl = useMemo<RefObject<HTMLDivElement>>(
+    () => ({ current: controlBarElement }),
+    [controlBarElement]
+  )
 
   const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({})
 
@@ -45,7 +52,7 @@ export function DesktopControlBar({
 
   return (
     <div
-      ref={desktopControlBarEl}
+      ref={setControlBarElement}
       className={css({
         width: '100vw',
         display: 'flex',