ai_onboarding: Fix API key onboarding callout not showing properly (#34880)

Umesh Yadav and Danilo Leal created 4 months ago

The current onboarding callout for ApiKeysWithProviders is broken.

| Before | After |
|--------|--------|
| <img width="822" height="1914" alt="CleanShot 2025-07-22 at 16 21
53@2x"
src="https://github.com/user-attachments/assets/5a611a8c-1ca2-4a13-965e-6fbd7cfe757a"
/> | <img width="814" height="1956" alt="CleanShot 2025-07-22 at 16 22
38@2x"
src="https://github.com/user-attachments/assets/3263b804-671a-4637-b5dc-ee7c87befa48"
/> |

cc @danilo-leal 

Release Notes:

- N/A

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/ai_onboarding/src/agent_api_keys_onboarding.rs | 29 ++++++++----
1 file changed, 20 insertions(+), 9 deletions(-)

Detailed changes

crates/ai_onboarding/src/agent_api_keys_onboarding.rs

@@ -38,10 +38,6 @@ impl ApiKeysWithProviders {
             .map(|provider| (provider.icon(), provider.name().0.clone()))
             .collect()
     }
-
-    pub fn has_providers(&self) -> bool {
-        !self.configured_providers.is_empty()
-    }
 }
 
 impl Render for ApiKeysWithProviders {
@@ -53,11 +49,10 @@ impl Render for ApiKeysWithProviders {
                 .map(|(icon, name)| {
                     h_flex()
                         .gap_1p5()
-                        .child(Icon::new(icon).size(IconSize::Small).color(Color::Muted))
+                        .child(Icon::new(icon).size(IconSize::XSmall).color(Color::Muted))
                         .child(Label::new(name))
                 });
-
-        h_flex()
+        div()
             .mx_2p5()
             .p_1()
             .pb_0()
@@ -85,8 +80,24 @@ impl Render for ApiKeysWithProviders {
                     .border_x_1()
                     .border_color(cx.theme().colors().border)
                     .bg(cx.theme().colors().panel_background)
-                    .child(Icon::new(IconName::Info).size(IconSize::XSmall).color(Color::Muted))
-                    .child(Label::new("Or start now using API keys from your environment for the following providers:").color(Color::Muted))
+                    .child(
+                        h_flex()
+                            .min_w_0()
+                            .gap_2()
+                            .child(
+                                Icon::new(IconName::Info)
+                                    .size(IconSize::XSmall)
+                                    .color(Color::Muted)
+                            )
+                            .child(
+                                div()
+                                    .w_full()
+                                    .child(
+                                        Label::new("Or start now using API keys from your environment for the following providers:")
+                                            .color(Color::Muted)
+                                    )
+                            )
+                    )
                     .children(configured_providers_list)
             )
     }