ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): improve AI chat word wrapping readability (#746)

Browse Source 
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 <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Rotimi Best
2026-07-13 00:24:23 +01:00
committed by GitHub
co-authored by Cursor Agent Rotimi Best
parent 2815a61437
commit d1deb1be22
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
+14 -3
View File
@@ -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;