From 3954e445f331ee8e269c5bb3f74af7d8c196d322 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Tue, 17 Mar 2026 14:43:46 -0400
Subject: [PATCH] fix(ui): keep provider names readable

---
 ui/src/components/profiles/profile-create-dialog.tsx  | 11 ++++++++---
 .../profiles/profile-create-dialog.test.tsx           |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/profiles/profile-create-dialog.tsx b/ui/src/components/profiles/profile-create-dialog.tsx
index c95dfc00..00f68aa7 100644
--- a/ui/src/components/profiles/profile-create-dialog.tsx
+++ b/ui/src/components/profiles/profile-create-dialog.tsx
@@ -725,12 +725,17 @@ function CompactPresetCard({
       </div>
 
       <div className="min-w-0 flex-1 space-y-1">
-        <div className="flex items-start justify-between gap-2">
-          <div className="truncate text-sm font-semibold leading-tight">{preset.name}</div>
+        <div className="space-y-1">
+          <div
+            className="text-sm font-semibold leading-tight"
+            style={{ ...CARD_META_CLAMP_STYLE, WebkitLineClamp: 2 }}
+          >
+            {preset.name}
+          </div>
           {preset.badge && (
             <Badge
               variant="secondary"
-              className="shrink-0 bg-muted px-1.5 py-0 text-[10px] text-muted-foreground"
+              className="inline-flex bg-muted px-1.5 py-0 text-[10px] text-muted-foreground"
             >
               {preset.badge}
             </Badge>
diff --git a/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx b/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
index 6633e771..fb1f276b 100644
--- a/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
+++ b/ui/tests/unit/components/profiles/profile-create-dialog.test.tsx
@@ -34,6 +34,7 @@ describe('ProfileCreateDialog', () => {
     );
 
     expect(screen.getByText('Featured Providers')).toBeInTheDocument();
+    expect(screen.getByText('Alibaba Coding Plan')).not.toHaveClass('truncate');
     const morePresetsToggle = screen.getByRole('button', { name: /More Presets/i });
     expect(morePresetsToggle).toHaveAttribute('aria-expanded', 'false');
     expect(document.body.querySelectorAll('.overflow-x-auto')).toHaveLength(1);