From 531774fbdaca5ccafc8e98e2abe3bf9b66dd91c8 Mon Sep 17 00:00:00 2001
From: Roee Sivan <roee.sivan@post.runi.ac.il>
Date: Sun, 11 Oct 2026 15:56:54 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20keep=20the=20admin=20p?=
 =?UTF-8?q?anel=20in=20place=20when=20changing=20a=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React Aria renders the radio and switch inputs visually hidden and
absolutely positioned. Their labels were not positioned, so in the
side panel the inputs were anchored to the aside and did not scroll
with its content. Focusing one made Chrome scroll the aside, which
has no scrollbar, hiding the panel content.

Position the labels so each hidden input stays inside its control.
---
 CHANGELOG.md                           | 1 +
 src/frontend/src/primitives/Radio.tsx  | 2 ++
 src/frontend/src/primitives/Switch.tsx | 2 ++
 3 files changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1af1dd928..fceac8935 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to
 - 🔒️(backend) sign lobby participant id
 - 🐛(frontend) omit the default speaker id sent to LiveKit
 - 🐛(frontend) play the speaker test when no output is picked
+- 🐛(frontend) keep the admin panel in place when changing a setting #1804
 
 ## [1.34.0] - 2026-10-07
 
diff --git a/src/frontend/src/primitives/Radio.tsx b/src/frontend/src/primitives/Radio.tsx
index a7cbdd36e..3c01c8733 100644
--- a/src/frontend/src/primitives/Radio.tsx
+++ b/src/frontend/src/primitives/Radio.tsx
@@ -9,6 +9,8 @@ import { type StyledVariantProps } from '@/styled-system/types'
 const StyledRadio = styled(RACRadio, {
   base: {
     display: 'flex',
+    // anchor the visually hidden input, so it scrolls with the radio
+    position: 'relative',
     alignItems: 'center',
     gap: 0.375,
     forcedColorAdjust: 'none',
diff --git a/src/frontend/src/primitives/Switch.tsx b/src/frontend/src/primitives/Switch.tsx
index 8713be28e..d2a44bd9c 100644
--- a/src/frontend/src/primitives/Switch.tsx
+++ b/src/frontend/src/primitives/Switch.tsx
@@ -9,6 +9,8 @@ import { RiCheckLine, RiCloseFill } from '@remixicon/react'
 const StyledSwitch = styled(RACSwitch, {
   base: {
     display: 'flex',
+    // anchor the visually hidden input, so it scrolls with the switch
+    position: 'relative',
     alignItems: 'center',
     gap: '0.571rem',
     color: 'black',