agent_ui: Improve wrapping behavior in provider configuration header (#34989)

Finn Evers created 4 months ago

This ensures that the "Add provider" button does not move offscreen too
fast and ensures the text wraps for smaller panel sizes.

| Before | After |
| --- | --- |
| <img width="413" height="84" alt="image"
src="https://github.com/user-attachments/assets/565f7503-bddb-4b05-83c1-8f8745ac3ce3"
/> | <img width="392" height="84" alt="image"
src="https://github.com/user-attachments/assets/18469e4d-d94c-4641-9081-1af8981bfffd"
/> |

Release Notes:

- N/A

Change summary

crates/agent_ui/src/agent_configuration.rs | 86 ++++++++++++++---------
1 file changed, 51 insertions(+), 35 deletions(-)

Detailed changes

crates/agent_ui/src/agent_configuration.rs

@@ -321,46 +321,62 @@ impl AgentConfiguration {
                     .justify_between()
                     .child(
                         v_flex()
+                            .w_full()
                             .gap_0p5()
-                            .child(Headline::new("LLM Providers"))
+                            .child(
+                                h_flex()
+                                    .w_full()
+                                    .gap_2()
+                                    .justify_between()
+                                    .child(Headline::new("LLM Providers"))
+                                    .child(
+                                        PopoverMenu::new("add-provider-popover")
+                                            .trigger(
+                                                Button::new("add-provider", "Add Provider")
+                                                    .icon_position(IconPosition::Start)
+                                                    .icon(IconName::Plus)
+                                                    .icon_size(IconSize::Small)
+                                                    .icon_color(Color::Muted)
+                                                    .label_size(LabelSize::Small),
+                                            )
+                                            .anchor(gpui::Corner::TopRight)
+                                            .menu({
+                                                let workspace = self.workspace.clone();
+                                                move |window, cx| {
+                                                    Some(ContextMenu::build(
+                                                        window,
+                                                        cx,
+                                                        |menu, _window, _cx| {
+                                                            menu.header("Compatible APIs").entry(
+                                                                "OpenAI",
+                                                                None,
+                                                                {
+                                                                    let workspace =
+                                                                        workspace.clone();
+                                                                    move |window, cx| {
+                                                                        workspace
+                                                        .update(cx, |workspace, cx| {
+                                                            AddLlmProviderModal::toggle(
+                                                                LlmCompatibleProvider::OpenAi,
+                                                                workspace,
+                                                                window,
+                                                                cx,
+                                                            );
+                                                        })
+                                                        .log_err();
+                                                                    }
+                                                                },
+                                                            )
+                                                        },
+                                                    ))
+                                                }
+                                            }),
+                                    ),
+                            )
                             .child(
                                 Label::new("Add at least one provider to use AI-powered features.")
                                     .color(Color::Muted),
                             ),
-                    )
-                    .child(
-                        PopoverMenu::new("add-provider-popover")
-                            .trigger(
-                                Button::new("add-provider", "Add Provider")
-                                    .icon_position(IconPosition::Start)
-                                    .icon(IconName::Plus)
-                                    .icon_size(IconSize::Small)
-                                    .icon_color(Color::Muted)
-                                    .label_size(LabelSize::Small),
-                            )
-                            .anchor(gpui::Corner::TopRight)
-                            .menu({
-                                let workspace = self.workspace.clone();
-                                move |window, cx| {
-                                    Some(ContextMenu::build(window, cx, |menu, _window, _cx| {
-                                        menu.header("Compatible APIs").entry("OpenAI", None, {
-                                            let workspace = workspace.clone();
-                                            move |window, cx| {
-                                                workspace
-                                                    .update(cx, |workspace, cx| {
-                                                        AddLlmProviderModal::toggle(
-                                                            LlmCompatibleProvider::OpenAi,
-                                                            workspace,
-                                                            window,
-                                                            cx,
-                                                        );
-                                                    })
-                                                    .log_err();
-                                            }
-                                        })
-                                    }))
-                                }
-                            }),
                     ),
             )
             .child(