From 2de7fdde10c66ffdab6b312bc8dbd54726ec6363 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 27 Jul 2026 17:37:57 +0200
Subject: [PATCH] Fix layout switches not showing their state on the combined
 docs page

On the combined Storybook docs page for the call footer, the layout switches would not show the correct state until you hovered over them because they all shared the same input name and thus were interpreted as belonging to the same radio group.
---
 src/room/LayoutSwitch.tsx                       | 5 +++--
 src/room/__snapshots__/InCallView.test.tsx.snap | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/room/LayoutSwitch.tsx b/src/room/LayoutSwitch.tsx
index 80995a35c..91ba0654f 100644
--- a/src/room/LayoutSwitch.tsx
+++ b/src/room/LayoutSwitch.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 FC } from "react";
+import { useId, type FC } from "react";
 import {
   SpotlightViewIcon,
   GridIcon,
@@ -24,10 +24,11 @@ interface Props {
 export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
   const { t } = useTranslation();
   const layout = useBehavior(vm.layout$);
+  const name = useId();
 
   return (
     <Switch<"spotlight", "grid">
-      name="layout"
+      name={name}
       aria-label={t("layout_switch_label")}
       leftLabel={t("layout_spotlight_label")}
       leftValue="spotlight"
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 8a805668d..984e2b12e 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -432,8 +432,8 @@ exports[`InCallView > rendering > renders 1`] = `
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_19_"
-          name="layout"
+          aria-labelledby="_r_1a_"
+          name="_r_19_"
           type="radio"
           value="spotlight"
         />
@@ -452,9 +452,9 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="_r_1e_"
+          aria-labelledby="_r_1f_"
           checked=""
-          name="layout"
+          name="_r_19_"
           type="radio"
           value="grid"
         />