From d1deb1be225ef4f15d33e5184a81ce379b6b8c45 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 13 Jul 2026 00:24:23 +0100
Subject: [PATCH] fix(dashboard): improve AI chat word wrapping readability
 (#746)

Replace break-all on chat message prose with break-words so normal text
wraps at word boundaries. Apply overflow-wrap only to inline code and
links, and use horizontal scroll for fenced code blocks.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../features/ai-assistant/message-bubble.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte b/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
index 9e0b65ad..198bce7e 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
@@ -137,7 +137,7 @@
   {:else}
     <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
     <div
-      class="max-w-[90%] rounded-lg px-3 py-2 text-sm {message.role === 'user'
+      class="max-w-[90%] min-w-0 rounded-lg px-3 py-2 text-sm {message.role === 'user'
         ? 'ui:bg-primary ui:text-primary-foreground'
         : 'ui:bg-muted'}"
       onclick={handleBubbleClick}
@@ -159,8 +159,8 @@
       {#each inlineParts as part, partIndex (partIndex)}
         {#if part.type === 'text'}
           <div
-            class="ai-chat-prose prose prose-sm dark:prose-invert max-w-none break-all {message.role === 'user' &&
-              'ui:text-primary-foreground!'}"
+            class="ai-chat-prose prose prose-sm dark:prose-invert max-w-none min-w-0 break-words {message.role ===
+              'user' && 'ui:text-primary-foreground!'}"
           >
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html renderMentions(renderMarkdown(part.text as string), courseId)}
@@ -262,6 +262,17 @@
     margin-bottom: 0;
   }
 
+  /* Normal prose wraps at word boundaries; only unbreakable runs (URLs, keys) split mid-token. */
+  :global(.ai-chat-prose.prose pre) {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  :global(.ai-chat-prose.prose :not(pre) > code),
+  :global(.ai-chat-prose.prose a) {
+    overflow-wrap: anywhere;
+  }
+
   :global(.mention-link) {
     display: inline;
     cursor: pointer;