Render model dropdown as portal

frontend/static/app.css

@@ -136,10 +136,6 @@ button {
   box-shadow: var(--surface-shadow);
 }
 
-.topbar:has(.model-dropdown.open) {
-  z-index: 20;
-}
-
 .brand {
   display: flex;
   align-items: center;
@@ -249,10 +245,10 @@ button {
 }
 
 .model-options {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 30;
+  position: fixed;
+  top: var(--model-options-top, 64px);
+  right: var(--model-options-right, 16px);
+  z-index: 80;
   display: grid;
   gap: 4px;
   min-width: 220px;
@@ -268,7 +264,7 @@ button {
   transition: opacity 0.16s ease, transform 0.16s ease;
 }
 
-.model-dropdown.open .model-options {
+.model-options.open {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);

frontend/static/app.js

@@ -218,9 +218,17 @@
   function closeModelDropdown() {
     if (!modelDropdown || !modelDropdownButton) return;
     modelDropdown.classList.remove("open");
+    if (modelOptions) modelOptions.classList.remove("open");
     modelDropdownButton.setAttribute("aria-expanded", "false");
   }
 
+  function positionModelOptions() {
+    if (!modelDropdownButton || !modelOptions) return;
+    var rect = modelDropdownButton.getBoundingClientRect();
+    modelOptions.style.setProperty("--model-options-top", Math.round(rect.bottom + 8) + "px");
+    modelOptions.style.setProperty("--model-options-right", Math.max(12, Math.round(window.innerWidth - rect.right)) + "px");
+  }
+
   function setModelValue(value) {
     if (!modelSelect || !value) return;
     modelSelect.value = value;
@@ -241,11 +249,14 @@
 
   function setupModelDropdown() {
     if (!modelDropdown || !modelDropdownButton || !modelOptions || !modelSelect) return;
+    if (modelOptions.parentElement !== document.body) document.body.appendChild(modelOptions);
     setModelValue(modelSelect.value || "gpt-5.5");
     modelDropdownButton.addEventListener("click", function () {
       if (modelDropdownButton.disabled) return;
       var shouldOpen = !modelDropdown.classList.contains("open");
+      if (shouldOpen) positionModelOptions();
       modelDropdown.classList.toggle("open", shouldOpen);
+      modelOptions.classList.toggle("open", shouldOpen);
       modelDropdownButton.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
     });
     modelOptions.querySelectorAll(".model-option").forEach(function (option) {
@@ -255,11 +266,14 @@
       });
     });
     document.addEventListener("click", function (event) {
-      if (!modelDropdown.contains(event.target)) closeModelDropdown();
+      if (!modelDropdown.contains(event.target) && !modelOptions.contains(event.target)) closeModelDropdown();
     });
     document.addEventListener("keydown", function (event) {
       if (event.key === "Escape") closeModelDropdown();
     });
+    window.addEventListener("resize", function () {
+      if (modelDropdown.classList.contains("open")) positionModelOptions();
+    });
   }
 
   function updateComposerMode() {