📝(frontend) clarify toggleButtonProps override behavior in documentation

Document that toggleButtonProps are intended to override default and
computed values within ToggleComponent, acknowledging this breaks
encapsulation but serves as useful starting point.

src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx

@@ -61,7 +61,7 @@ export const AudioDevicesControl = ({
         {...trackProps}
         kind={kind}
         toggle={trackProps.toggle as () => Promise<void>}
-        toggleButtonProps={{
+        overrideToggleButtonProps={{
           ...(hideMenu
             ? {
                 groupPosition: undefined,

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -33,7 +33,7 @@ export type ToggleDeviceProps<T extends ToggleSource> = {
   ) => Promise<void | boolean | undefined>
   context?: 'room' | 'join'
   kind: 'audioinput' | 'videoinput'
-  toggleButtonProps?: Partial<ToggleButtonProps>
+  overrideToggleButtonProps?: Partial<ToggleButtonProps>
 }
 
 export const ToggleDevice = <T extends ToggleSource>({
@@ -41,27 +41,32 @@ export const ToggleDevice = <T extends ToggleSource>({
   enabled,
   toggle,
   context = 'room',
-  ...props
+  overrideToggleButtonProps,
 }: ToggleDeviceProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
-  const { variant, errorVariant, toggleButtonProps } =
-    useMemo<ToggleDeviceStyleProps>(() => {
-      if (context === 'join') {
-        return {
-          variant: 'whiteCircle',
-          errorVariant: 'errorCircle',
-          toggleButtonProps: {
-            groupPosition: undefined,
-          },
-        } as ToggleDeviceStyleProps
-      }
+  const {
+    variant,
+    errorVariant,
+    toggleButtonProps: computedToggleButtonProps,
+  } = useMemo<ToggleDeviceStyleProps>(() => {
+    if (context === 'join') {
       return {
-        variant: 'primaryDark',
-        errorVariant: 'error2',
-        toggleButtonProps: undefined,
+        variant: 'whiteCircle',
+        errorVariant: 'errorCircle',
+        toggleButtonProps: {
+          groupPosition: undefined,
+        },
       } as ToggleDeviceStyleProps
-    }, [context])
+    }
+    return {
+      variant: 'primaryDark',
+      errorVariant: 'error2',
+      toggleButtonProps: {
+        groupPosition: 'left',
+      },
+    } as ToggleDeviceStyleProps
+  }, [context])
 
   const [pushToTalk, setPushToTalk] = useState(false)
 
@@ -121,9 +126,8 @@ export const ToggleDevice = <T extends ToggleSource>({
             ? t('tooltip', { keyPrefix: 'permissionsButton' })
             : toggleLabel
         }
-        groupPosition="left"
-        {...toggleButtonProps}
-        {...props}
+        {...computedToggleButtonProps}
+        {...overrideToggleButtonProps}
       >
         <Icon />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx

@@ -107,7 +107,7 @@ export const VideoDeviceControl = ({
         {...trackProps}
         kind={kind}
         toggle={toggleWithProcessor}
-        toggleButtonProps={{
+        overrideToggleButtonProps={{
           ...(hideMenu
             ? {
                 groupPosition: undefined,