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>
       )}