From ef05c0ab19c1df59685b6e43b376c4f05fe9bd59 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 22 Jul 2026 18:37:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20isolate=20useSiz?=
 =?UTF-8?q?e=20in=20a=20child=20of=20MoreOptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the useSize subscription into a dedicated child component of
MoreOptions.

The options now only re-render when they actually need to collapse,
instead of on every size change of the container.
---
 .../prefabs/ControlBar/MoreOptions.tsx        | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
index e571d655..582d08c1 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
@@ -5,7 +5,7 @@ import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { InfoToggle } from '../../components/controls/InfoToggle'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject } from 'react'
+import { useState, RefObject, useEffect } from 'react'
 import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
 import { Button } from '@/primitives'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
@@ -66,12 +66,32 @@ export const LateralMenu = () => {
   )
 }
 
+interface BreakpointObserverProps {
+  containerRef: RefObject<HTMLDivElement>
+  onWideChange: (isWide: boolean) => void
+}
+
+const BreakpointObserver = ({
+  containerRef,
+  onWideChange,
+}: BreakpointObserverProps) => {
+  const { width } = useSize(containerRef)
+  const isWide = width > CONTROL_BAR_BREAKPOINT
+
+  useEffect(() => {
+    onWideChange(isWide)
+  }, [isWide, onWideChange])
+
+  return null
+}
+
 export const MoreOptions = ({
   parentElement,
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const { width: parentWidth } = useSize(parentElement)
+  const [isWide, setIsWide] = useState(false)
+
   return (
     <nav
       className={css({
@@ -83,11 +103,11 @@ export const MoreOptions = ({
         paddingRight: '0.25rem',
       })}
     >
-      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
-        <NavigationControls />
-      ) : (
-        <LateralMenu />
-      )}
+      <BreakpointObserver
+        containerRef={parentElement}
+        onWideChange={setIsWide}
+      />
+      {isWide ? <NavigationControls /> : <LateralMenu />}
     </nav>
   )
 }