diff --git a/src/web/public/app.js b/src/web/public/app.js
index 1adec996..63791b20 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -1857,11 +1857,17 @@ class ClaudemanApp {
     document.querySelectorAll('.subagent-dropdown.open').forEach(d => d.classList.remove('open'));
 
     if (!isOpen) {
+      // Position the dropdown using fixed positioning
+      const rect = badgeEl.getBoundingClientRect();
+      dropdown.style.top = `${rect.bottom + 4}px`;
+      dropdown.style.left = `${rect.left + rect.width / 2}px`;
+      dropdown.style.transform = 'translateX(-50%)';
+
       dropdown.classList.add('open');
 
       // Close dropdown when clicking outside
       const closeHandler = (e) => {
-        if (!badgeEl.contains(e.target)) {
+        if (!badgeEl.contains(e.target) && !dropdown.contains(e.target)) {
           dropdown.classList.remove('open');
           document.removeEventListener('click', closeHandler);
         }
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 8ad2146f..80ed226f 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -2961,24 +2961,20 @@ kbd {
   color: var(--accent-hover);
 }
 
-/* Subagent Dropdown */
+/* Subagent Dropdown - uses fixed positioning to escape overflow:hidden parents */
 .subagent-dropdown {
   display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
+  position: fixed;
   min-width: 220px;
   max-width: 320px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  z-index: 10000;
   overflow: hidden;
 }
 
-.tab-subagent-badge:hover .subagent-dropdown,
 .subagent-dropdown.open {
   display: block;
 }