admin-valentin/open-notebook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: prevent chat input and message overflow with long unbroken strings

Browse source 
Add min-w-0 to chat input flex container and textarea to prevent
field-sizing-content from expanding the layout. Replace break-words
with break-all on user message bubbles to force wrapping at any
character for strings without spaces.
This commit is contained in:
Luis Novo 2026-02-16 14:56:46 -03:00
parent e38c64c70c
commit afc34632f7
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/(dashboard)/notebooks/[id]/page.tsx
View file

@ -230,7 +230,7 @@ export default function NotebookPage() {
</div> </div>
{/* Chat Column - always expanded, takes remaining space */} {/* Chat Column - always expanded, takes remaining space */}
<div className="transition-all duration-150 flex-1 lg:pr-6 lg:-mr-6"> <div className="transition-all duration-150 flex-1 min-w-0 lg:pr-6 lg:-mr-6">
<ChatColumn <ChatColumn
notebookId={notebookId} notebookId={notebookId}
contextSelections={contextSelections} contextSelections={contextSelections}

6
frontend/src/components/source/ChatPanel.tsx
View file

@ -203,7 +203,7 @@ export function ChatPanel({
onReferenceClick={handleReferenceClick} onReferenceClick={handleReferenceClick}
/> />
) : ( ) : (
<p className="text-sm break-words overflow-wrap-anywhere">{message.content}</p> <p className="text-sm break-all">{message.content}</p>
)} )}
</div> </div>
{message.type === 'ai' && ( {message.type === 'ai' && (
@ -290,7 +290,7 @@ export function ChatPanel({
</div> </div>
)} )}
<div className="flex gap-2 items-end"> <div className="flex gap-2 items-end min-w-0">
<Textarea <Textarea
id={chatInputId} id={chatInputId}
name="chat-message" name="chat-message"
@ -300,7 +300,7 @@ export function ChatPanel({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={`${t.chat.sendPlaceholder} (${t.chat.pressToSend.replace('{key}', keyHint)})`} placeholder={`${t.chat.sendPlaceholder} (${t.chat.pressToSend.replace('{key}', keyHint)})`}
disabled={isStreaming} disabled={isStreaming}
className="flex-1 min-h-[40px] max-h-[100px] resize-none py-2 px-3" className="flex-1 min-h-[40px] max-h-[100px] resize-none py-2 px-3 min-w-0"
rows={1} rows={1}
/> />
<Button <Button