github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 10:58:17 -05:00
Code Issues 1.3k Packages Projects Releases 126 Wiki Activity

[PR #22361] [CLOSED] fix: prevent code blocks from causing message bubble width inconsistency #49680

New Issue
Closed
opened 2026-04-30 01:59:10 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-30 01:59:10 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/22361
Author: @realsamrat
Created: 3/7/2026
Status: ❌ Closed

Base: main ← Head: fix/yaml-codeblock-bubble-width

📝 Commits (1)

  • 64169c7 fix: prevent code blocks from causing message bubble width inconsistency

📊 Changes

2 files changed (+5 additions, -5 deletions)

View changed files

📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+2 -2)
📝 src/lib/components/chat/Messages/UserMessage.svelte (+3 -3)

📄 Description

Description

While testing the chat interface in widescreen mode, I noticed that message bubbles containing code blocks (particularly YAML) would change width inconsistently when scrolling. The bubbles would appear to resize as different messages came into view, creating a jarring visual effect.

Root Cause

The issue was caused by missing min-w-0 on flex containers in the message components. In CSS flexbox, without min-w-0, flex children refuse to shrink below their intrinsic content width. When code blocks rendered wide content, they would force their parent containers to expand beyond the intended max-width, causing the layout reflow.

Additionally, some containers used min-w-full which explicitly prevented proper flex shrinking behavior.

Changes

UserMessage.svelte:

  • Changed min-w-full to min-w-0 on the .chat-user container
  • Added min-w-0 to parent flex containers wrapping message content

ResponseMessage.svelte:

  • Added min-w-0 to the flex-auto container that wraps assistant messages
  • Changed min-w-full to min-w-0 on the .chat-assistant container

Testing

Tested in widescreen mode with various code block types (YAML, JSON, Python) containing long lines. Message bubble widths now remain consistent when scrolling up and down through the conversation.

Fixes #5975

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/22361 **Author:** [@realsamrat](https://github.com/realsamrat) **Created:** 3/7/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/yaml-codeblock-bubble-width` --- ### 📝 Commits (1) - [`64169c7`](https://github.com/open-webui/open-webui/commit/64169c780e1822767fb1938db8951b8a4aae7a90) fix: prevent code blocks from causing message bubble width inconsistency ### 📊 Changes **2 files changed** (+5 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+2 -2) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+3 -3) </details> ### 📄 Description ## Description While testing the chat interface in widescreen mode, I noticed that message bubbles containing code blocks (particularly YAML) would change width inconsistently when scrolling. The bubbles would appear to resize as different messages came into view, creating a jarring visual effect. ## Root Cause The issue was caused by missing `min-w-0` on flex containers in the message components. In CSS flexbox, without `min-w-0`, flex children refuse to shrink below their intrinsic content width. When code blocks rendered wide content, they would force their parent containers to expand beyond the intended max-width, causing the layout reflow. Additionally, some containers used `min-w-full` which explicitly prevented proper flex shrinking behavior. ## Changes **UserMessage.svelte:** - Changed `min-w-full` to `min-w-0` on the `.chat-user` container - Added `min-w-0` to parent flex containers wrapping message content **ResponseMessage.svelte:** - Added `min-w-0` to the `flex-auto` container that wraps assistant messages - Changed `min-w-full` to `min-w-0` on the `.chat-assistant` container ## Testing Tested in widescreen mode with various code block types (YAML, JSON, Python) containing long lines. Message bubble widths now remain consistent when scrolling up and down through the conversation. Fixes #5975 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-30 01:59:10 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#49680
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?