Fix agent dropdown rendering in new API key modal (#11187)

## Description

This fixes a rendering bug in the API key creation modal. The modal
content was showing through the dropdown to select which agent the key
is for.

The problem was that the agent dropdown menu renders as an overlay, but
the modal is already an overlay. As a result, other modal content
wouldn't render fully below the dropdown - rendering instead depends on
the order that the UI framework processes elements in. Here, it would
paint the collapsed exipry selector dropdown on top of the opened agent
dropdown menu.

This category of bugs has been a longstanding issue with the UI
framework's z-index handling. As a workaround for now, we can:
1. Reserve space in the modal for the agent dropdown
2. Render the dropdown in a new `Stack` as an overlay that's painted
after the other modal contents

## Testing
- [x] I have manually tested my changes locally with `./script/run`

### Screenshots / Videos
<img width="701" height="724" alt="Screenshot 2026-05-20 at 1 41 35 AM"
src="https://github.com/user-attachments/assets/a910b308-db4b-4e6f-bdb0-7f827561781f"
/>



## Agent Mode
- [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode

---------

Co-authored-by: Jason Keung <jason@warp.dev>
Co-authored-by: Oz <oz-agent@warp.dev>

Author: 3 people

app/src/settings_view/platform/create_api_key_modal.rs

@@ -6,14 +6,16 @@ use crate::workspaces::user_workspaces::UserWorkspaces;
 use crate::{
     appearance::Appearance,
     editor::{EditorView, PropagateAndNoOpNavigationKeys, SingleLineEditorOptions, TextOptions},
+    view_components::{dropdown::DROPDOWN_PADDING, dropdown::TOP_MENU_BAR_HEIGHT},
     view_components::{Dropdown as DropdownView, DropdownItem},
 };
 use chrono::Utc;
 use pathfinder_geometry::vector::vec2f;
 use warp_core::features::FeatureFlag;
 use warpui::elements::{
-    Border, ChildView, ConstrainedBox, Container, CornerRadius, Empty, Fill, Flex,
-    MouseStateHandle, ParentElement, Radius, Text,
+    Border, ChildAnchor, ChildView, ConstrainedBox, Container, CornerRadius, Empty, Fill, Flex,
+    MouseStateHandle, OffsetPositioning, ParentElement, PositionedElementAnchor,
+    PositionedElementOffsetBounds, Radius, SavePosition, Stack, Text,
 };
 use warpui::elements::{CrossAxisAlignment, Expanded, MainAxisAlignment, MainAxisSize, Padding};
 use warpui::ui_components::button::ButtonVariant;
@@ -29,6 +31,7 @@ const OZ_AGENTS_URL: &str = "https://oz.warp.dev/agents?new=true";
 
 const LABEL_FONT_SIZE: f32 = 14.;
 const INPUT_WIDTH: f32 = 428.; // 460px - (2 * 16px) padding
+const AGENT_DROPDOWN_POSITION_ID: &str = "create_api_key_modal_agent_dropdown";
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub(crate) enum ApiKeyType {
@@ -166,7 +169,7 @@ impl CreateApiKeyModal {
             ctx.add_typed_action_view(DropdownView::<CreateApiKeyModalAction>::new);
         agent_dropdown.update(ctx, |dropdown, ctx| {
             dropdown.set_top_bar_max_width(INPUT_WIDTH);
-            dropdown.set_menu_width(INPUT_WIDTH, ctx);
+            dropdown.set_match_menu_width_to_top_bar(true, ctx);
         });
 
         let api_key_type_control = ctx.add_typed_action_view(move |ctx| {
@@ -667,6 +670,7 @@ impl View for CreateApiKeyModal {
                 .finish();
 
                 let mut col = Flex::column();
+                let mut render_agent_dropdown = false;
 
                 if self.has_team || self.has_named_agents {
                     let type_label =
@@ -738,13 +742,19 @@ impl View for CreateApiKeyModal {
                             .finish(),
                         );
                     } else {
+                        render_agent_dropdown = true;
                         col.add_child(
-                            ConstrainedBox::new(
-                                Container::new(ChildView::new(&self.agent_dropdown).finish())
-                                    .with_margin_bottom(16.)
-                                    .finish(),
+                            Container::new(
+                                SavePosition::new(
+                                    ConstrainedBox::new(Empty::new().finish())
+                                        .with_width(INPUT_WIDTH)
+                                        .with_height(TOP_MENU_BAR_HEIGHT + (2. * DROPDOWN_PADDING))
+                                        .finish(),
+                                    AGENT_DROPDOWN_POSITION_ID,
+                                )
+                                .finish(),
                             )
-                            .with_width(INPUT_WIDTH)
+                            .with_margin_bottom(16.)
                             .finish(),
                         );
                     }
@@ -786,7 +796,24 @@ impl View for CreateApiKeyModal {
                 );
 
                 col.add_child(buttons_row);
-                col.finish()
+                let mut stack = Stack::new()
+                    .with_constrain_absolute_children()
+                    .with_child(col.finish());
+                if render_agent_dropdown {
+                    stack.add_positioned_overlay_child(
+                        ConstrainedBox::new(ChildView::new(&self.agent_dropdown).finish())
+                            .with_width(INPUT_WIDTH)
+                            .finish(),
+                        OffsetPositioning::offset_from_save_position_element(
+                            AGENT_DROPDOWN_POSITION_ID,
+                            vec2f(0., 0.),
+                            PositionedElementOffsetBounds::WindowByPosition,
+                            PositionedElementAnchor::TopLeft,
+                            ChildAnchor::TopLeft,
+                        ),
+                    );
+                }
+                stack.finish()
             }
         }
     }