From 569da822b6d8091fd043b646a2d433fa58abc9a2 Mon Sep 17 00:00:00 2001
From: claude_code <claude_code@vvzvlad.xyz>
Date: Sun, 21 Jun 2026 17:11:21 +0300
Subject: [PATCH] fix(ai-chat): fit full role-card description text in new-chat
 empty state

The colored role cards in the AI chat empty state truncated their
admin-configured description with an ellipsis and could clip the top row
when the cards overflowed. Make the full text fit:

- drop the description lineClamp so the whole text renders
- add overflow-wrap: anywhere so long unbreakable tokens (URLs) wrap
- switch the cards container to align-content: flex-start so an
  overflowing top row stays reachable while scrolling (the parent
  Mantine Center still vertically centers the block when it fits)
- widen the card max-width 180px -> 200px for more text room

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ai-chat/components/role-cards.module.css         | 12 ++++++++++--
 .../src/features/ai-chat/components/role-cards.tsx   |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/features/ai-chat/components/role-cards.module.css b/apps/client/src/features/ai-chat/components/role-cards.module.css
index b47dfd95..94e7c2fb 100644
--- a/apps/client/src/features/ai-chat/components/role-cards.module.css
+++ b/apps/client/src/features/ai-chat/components/role-cards.module.css
@@ -4,7 +4,11 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  align-content: center;
+  /* flex-start keeps the first row reachable when the wrapped cards overflow and
+     the container scrolls. With align-content: center, an overflowing top row is
+     pushed out of the scrollable area and becomes unreachable. The parent Mantine
+     Center still vertically centers the whole block when it fits. */
+  align-content: flex-start;
   gap: 10px;
   /* Cap the height so a large number of roles scrolls instead of blowing out
      the empty chat area. */
@@ -21,7 +25,7 @@
   justify-content: center;
   gap: 4px;
   min-width: 140px;
-  max-width: 180px;
+  max-width: 200px;
   min-height: 90px;
   padding: 12px 10px;
   border-radius: var(--mantine-radius-md);
@@ -50,4 +54,8 @@
 .description {
   opacity: 0.8;
   line-height: 1.3;
+  /* Break long unbreakable tokens (URLs, long foreign words) in the
+     admin-configured description so they wrap instead of overflowing the card
+     width now that the line clamp no longer caps the text. */
+  overflow-wrap: anywhere;
 }
diff --git a/apps/client/src/features/ai-chat/components/role-cards.tsx b/apps/client/src/features/ai-chat/components/role-cards.tsx
index 2551bdbf..75bdd984 100644
--- a/apps/client/src/features/ai-chat/components/role-cards.tsx
+++ b/apps/client/src/features/ai-chat/components/role-cards.tsx
@@ -45,7 +45,7 @@ function RoleCard({
         {name}
       </Text>
       {description && (
-        <Text size="xs" lineClamp={3} className={classes.description}>
+        <Text size="xs" className={classes.description}>
           {description}
         </Text>
       )}