From fa5944f2ce09f56f85b6eb28437c540ecd9fd574 Mon Sep 17 00:00:00 2001
From: ChrAlpha <53332481+ChrAlpha@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:12:07 +0000
Subject: [PATCH] fix(web): constrain long skill text in cards

---
 apps/web/src/pages/bots/components/bot-skills.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/bots/components/bot-skills.vue b/apps/web/src/pages/bots/components/bot-skills.vue
index 2c8ca9c1..60ee6ed1 100644
--- a/apps/web/src/pages/bots/components/bot-skills.vue
+++ b/apps/web/src/pages/bots/components/bot-skills.vue
@@ -53,12 +53,12 @@
       <Card
         v-for="skill in skills"
         :key="skillKey(skill)"
-        class="flex flex-col"
+        class="flex min-w-0 flex-col overflow-hidden"
       >
-        <CardHeader class="pb-3">
-          <div class="flex items-center justify-between gap-2">
+        <CardHeader class="min-w-0 pb-3">
+          <div class="flex min-w-0 items-center justify-between gap-2">
             <CardTitle
-              class="text-sm truncate"
+              class="min-w-0 flex-1 truncate text-sm"
               :title="skill.name"
             >
               {{ skill.name }}
@@ -152,13 +152,13 @@
             </div>
           </div>
           <CardDescription
-            class="line-clamp-2"
+            class="min-w-0 overflow-hidden line-clamp-2 break-words [overflow-wrap:anywhere]"
             :title="skill.description"
           >
             {{ skill.description || '-' }}
           </CardDescription>
         </CardHeader>
-        <CardContent class="pt-0 mt-auto space-y-1.5">
+        <CardContent class="mt-auto min-w-0 space-y-1.5 pt-0">
           <div class="flex flex-wrap items-center gap-1.5">
             <Badge
               variant="secondary"