From 31aab89ab0343b9b6388224f4e8ec2fa3f91fe2e Mon Sep 17 00:00:00 2001
From: Umesh Yadav <23421535+imumesh18@users.noreply.github.com>
Date: Tue, 22 Jul 2025 18:24:06 +0530
Subject: [PATCH] ai_onboarding: Fix API key onboarding callout not showing
 properly (#34880)

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 <daniloleal09@gmail.com>
---
 .../src/agent_api_keys_onboarding.rs          | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/crates/ai_onboarding/src/agent_api_keys_onboarding.rs b/crates/ai_onboarding/src/agent_api_keys_onboarding.rs
index 4f9e20cf77..883317e566 100644
--- a/crates/ai_onboarding/src/agent_api_keys_onboarding.rs
+++ b/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)
             )
     }