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,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"

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"
         />