From ae6d2b4ebfa8458ab90f9f201eec5adf551b3bba Mon Sep 17 00:00:00 2001
From: Milos Petrovic <milos@builder.io>
Date: Tue, 4 Aug 2026 18:51:27 +0200
Subject: [PATCH 1/2] Prevent disabled device menus from opening

---
 templates/clips/desktop/src/components/MediaDeviceRow.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/templates/clips/desktop/src/components/MediaDeviceRow.tsx b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
index acfc10bded..608cd48c7a 100644
--- a/templates/clips/desktop/src/components/MediaDeviceRow.tsx
+++ b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
@@ -104,7 +104,6 @@ export function MediaDeviceRow({
   const { open, setOpen, rowRef } = useRowMenu();
 
   const disabled = !on;
-  const canOpenMenu = !disabled || (kind === "mic" && !!onSystemAudioToggle);
   const defaultLabel = kind === "camera" ? "Default camera" : "Default mic";
   const accessLabel =
     kind === "camera" ? "Allow camera access" : "Allow microphone access";
@@ -119,10 +118,8 @@ export function MediaDeviceRow({
       <button
         type="button"
         className="row-button"
-        onClick={() => {
-          if (canOpenMenu) setOpen((v) => !v);
-        }}
-        disabled={!canOpenMenu}
+        onClick={() => setOpen((v) => !v)}
+        disabled={disabled}
         title={label}
       >
         <span className="row-label">{label}</span>

From 75fb7bdca7385227641e6a2d6de49d21971854aa Mon Sep 17 00:00:00 2001
From: Milos Petrovic <milos@builder.io>
Date: Wed, 5 Aug 2026 11:19:44 +0200
Subject: [PATCH 2/2] feedback

---
 .../desktop/src/components/MediaDeviceRow.tsx | 190 ++++++++++--------
 templates/clips/desktop/src/styles.css        |  20 +-
 2 files changed, 125 insertions(+), 85 deletions(-)

diff --git a/templates/clips/desktop/src/components/MediaDeviceRow.tsx b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
index 608cd48c7a..6302961a54 100644
--- a/templates/clips/desktop/src/components/MediaDeviceRow.tsx
+++ b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
@@ -104,6 +104,7 @@ export function MediaDeviceRow({
   const { open, setOpen, rowRef } = useRowMenu();
 
   const disabled = !on;
+  const canOpenMenu = on || (kind === "mic" && !!onSystemAudioToggle);
   const defaultLabel = kind === "camera" ? "Default camera" : "Default mic";
   const accessLabel =
     kind === "camera" ? "Allow camera access" : "Allow microphone access";
@@ -111,104 +112,125 @@ export function MediaDeviceRow({
     kind === "camera" ? "Refresh cameras" : "Refresh microphones";
 
   return (
-    <div className={`row ${on ? "row-on" : "row-off"}`} ref={rowRef}>
-      <span className="row-icon">
-        <Icon />
-      </span>
-      <button
-        type="button"
-        className="row-button"
-        onClick={() => setOpen((v) => !v)}
-        disabled={disabled}
-        title={label}
-      >
-        <span className="row-label">{label}</span>
-        {kind === "mic" && on ? (
-          <MicWave deviceId={selectedId} active={on && meterActive} />
-        ) : (
-          <span className="row-flex" aria-hidden />
-        )}
-        <span className="row-chev" aria-hidden>
-          <ChevronDown />
+    <div className="media-device-row" ref={rowRef}>
+      <div className={`row ${on ? "row-on" : "row-off"}`}>
+        <span className="row-icon">
+          <Icon />
         </span>
-      </button>
-      <Toggle
-        on={on}
-        onChange={(v) => {
-          if (!v) setOpen(false);
-          onToggle(v);
-        }}
-        label={kind === "camera" ? "Camera" : "Microphone"}
-      />
-      {open ? (
-        <div className="row-menu" role="menu">
+        <button
+          type="button"
+          className="row-button"
+          onClick={() => setOpen((v) => !v)}
+          disabled={disabled}
+          title={label}
+        >
+          <span className="row-label">{label}</span>
+          {kind === "mic" && on ? (
+            <MicWave deviceId={selectedId} active={on && meterActive} />
+          ) : (
+            <span className="row-flex" aria-hidden />
+          )}
+        </button>
+        {canOpenMenu ? (
           <button
             type="button"
-            className={`row-menu-item ${!selectedId ? "selected" : ""}`}
-            role="menuitemradio"
-            aria-checked={!selectedId}
-            onClick={() => {
-              onSelect("", "");
-              setOpen(false);
-            }}
+            className="row-menu-trigger"
+            onClick={() => setOpen((value) => !value)}
+            aria-label={on ? `Choose ${kind}` : "System audio settings"}
+            aria-expanded={open}
+            aria-haspopup="menu"
           >
-            <span className="row-menu-check" aria-hidden>
-              {!selectedId ? <CheckIcon /> : null}
-            </span>
-            <span className="row-menu-label">{defaultLabel}</span>
+            <ChevronDown />
           </button>
-          {devices.length === 0 ? (
-            <button
-              type="button"
-              className="row-menu-item row-menu-action"
-              role="menuitem"
-              onClick={() => {
-                onRefresh();
-                setOpen(false);
-              }}
-            >
-              <span className="row-menu-check" aria-hidden />
-              <span className="row-menu-label">{accessLabel}</span>
-            </button>
-          ) : (
+        ) : (
+          <span className="row-chev" aria-hidden>
+            <ChevronDown />
+          </span>
+        )}
+        <Toggle
+          on={on}
+          onChange={(v) => {
+            if (!v) setOpen(false);
+            onToggle(v);
+          }}
+          label={kind === "camera" ? "Camera" : "Microphone"}
+        />
+      </div>
+      {open && canOpenMenu ? (
+        <div className="row-menu" role="menu">
+          {on ? (
             <>
-              {devices.map((d) => {
-                const isSelected = !!selectedId && d.deviceId === selectedId;
-                return (
-                  <button
-                    key={d.deviceId}
-                    type="button"
-                    className={`row-menu-item ${isSelected ? "selected" : ""}`}
-                    role="menuitemradio"
-                    aria-checked={isSelected}
-                    onClick={() => {
-                      onSelect(d.deviceId, d.label);
-                      setOpen(false);
-                    }}
-                  >
-                    <span className="row-menu-check" aria-hidden>
-                      {isSelected ? <CheckIcon /> : null}
-                    </span>
-                    <span className="row-menu-label">
-                      {d.label || (kind === "camera" ? "Camera" : "Microphone")}
-                    </span>
-                  </button>
-                );
-              })}
               <button
                 type="button"
-                className="row-menu-item row-menu-action"
-                role="menuitem"
+                className={`row-menu-item ${!selectedId ? "selected" : ""}`}
+                role="menuitemradio"
+                aria-checked={!selectedId}
                 onClick={() => {
-                  onRefresh();
+                  onSelect("", "");
                   setOpen(false);
                 }}
               >
-                <span className="row-menu-check" aria-hidden />
-                <span className="row-menu-label">{refreshLabel}</span>
+                <span className="row-menu-check" aria-hidden>
+                  {!selectedId ? <CheckIcon /> : null}
+                </span>
+                <span className="row-menu-label">{defaultLabel}</span>
               </button>
+              {devices.length === 0 ? (
+                <button
+                  type="button"
+                  className="row-menu-item row-menu-action"
+                  role="menuitem"
+                  onClick={() => {
+                    onRefresh();
+                    setOpen(false);
+                  }}
+                >
+                  <span className="row-menu-check" aria-hidden />
+                  <span className="row-menu-label">{accessLabel}</span>
+                </button>
+              ) : (
+                <>
+                  {devices.map((d) => {
+                    const isSelected =
+                      !!selectedId && d.deviceId === selectedId;
+                    return (
+                      <button
+                        key={d.deviceId}
+                        type="button"
+                        className={`row-menu-item ${isSelected ? "selected" : ""}`}
+                        role="menuitemradio"
+                        aria-checked={isSelected}
+                        onClick={() => {
+                          onSelect(d.deviceId, d.label);
+                          setOpen(false);
+                        }}
+                      >
+                        <span className="row-menu-check" aria-hidden>
+                          {isSelected ? <CheckIcon /> : null}
+                        </span>
+                        <span className="row-menu-label">
+                          {d.label ||
+                            (kind === "camera" ? "Camera" : "Microphone")}
+                        </span>
+                      </button>
+                    );
+                  })}
+                  <button
+                    type="button"
+                    className="row-menu-item row-menu-action"
+                    role="menuitem"
+                    onClick={() => {
+                      onRefresh();
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="row-menu-check" aria-hidden />
+                    <span className="row-menu-label">{refreshLabel}</span>
+                  </button>
+                </>
+              )}
             </>
-          )}
+          ) : null}
           {kind === "mic" && onSystemAudioToggle ? (
             <div className="row-menu-toggle">
               <span className="row-menu-toggle-label">Record System audio</span>
diff --git a/templates/clips/desktop/src/styles.css b/templates/clips/desktop/src/styles.css
index cbc5481a23..74d0bb9fd9 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -605,6 +605,10 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 /* Popover menu rendered below a device row. */
+.media-device-row {
+  position: relative;
+}
+
 .row-menu {
   position: absolute;
   top: calc(100% + 4px);
@@ -645,7 +649,21 @@ body[data-clips-route="recording-pill"] #root {
   background: var(--surface-hover);
 }
 
-/* System-audio toggle sits below the device list, separated by a divider. */
+.row-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+}
+
+.row-menu-trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--brand-ring);
+  border-radius: 4px;
+}
+
 .row-menu-toggle {
   display: flex;
   align-items: center;