[PR #24853] [CLOSED] fix: prevent inconsistent conversation bubble sizes with YAML code blocks #131554

New Issue

GiteaMirror · 2026-05-21T17:12:06-05:00

GiteaMirror commented

2026-05-21 17:12:06 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/24853
Author: @imalkaperera13
Created: 5/17/2026
Status: ❌ Closed

Base: dev ← Head: fix/yaml-codeblock-bubble-resize-5975

📝 Commits (3)

7a6e601 fix: prevent inconsistent bubble sizes with YAML code blocks in ResponseMessage
76aabf9 fix: add overflow-hidden to UserMessage markdown container
f0d26fc fix: properly add overflow-hidden to UserMessage markdown container

📊 Changes

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

View changed files

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

📄 Description

## Description

Fixes #5975

When using Open WebUI in widescreen mode, chat bubbles with YAML code blocks resize inconsistently when scrolling. This happens because min-w-full on the markdown-prose container combined with wide code block content (especially YAML with long keys/values) causes the container to expand beyond the parent bubble's max-w constraint.

Root Cause

The markdown-prose container in ResponseMessage.svelte and UserMessage.svelte uses min-w-full which allows code block content (with white-space: pre-wrap) to push the bubble width beyond its parent constraints during scroll/reflow cycles, causing inconsistent resizing.

Fix

Added overflow-hidden to the markdown-prose container div in both:

src/lib/components/chat/Messages/ResponseMessage.svelte
src/lib/components/chat/Messages/UserMessage.svelte

This constrains content to stay within the bubble boundaries without affecting the visual rendering of code blocks (which scroll horizontally already).

Testing

Open Open WebUI in widescreen mode
Send a message containing a YAML code block (e.g., paste content from https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml)
Scroll up and down
Observe that bubble sizes remain consistent (before fix, they would change on scroll)

Checklist

Targets dev branch
Fix is minimal and focused on the reported issue
No new dependencies added
Manually reproducible fix for the reported scroll behavior

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

_{🔄 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/24853 **Author:** [@imalkaperera13](https://github.com/imalkaperera13) **Created:** 5/17/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `fix/yaml-codeblock-bubble-resize-5975` --- ### 📝 Commits (3) - [`7a6e601`](https://github.com/open-webui/open-webui/commit/7a6e6011be7970ecdc981913d3fa55bd26e7f8f1) fix: prevent inconsistent bubble sizes with YAML code blocks in ResponseMessage - [`76aabf9`](https://github.com/open-webui/open-webui/commit/76aabf9a7406d1f2ca5d0796af8179dc9e9e2c41) fix: add overflow-hidden to UserMessage markdown container - [`f0d26fc`](https://github.com/open-webui/open-webui/commit/f0d26fc7a7443da7d599365f645ddb3c91f76e80) fix: properly add overflow-hidden to UserMessage markdown container ### 📊 Changes **2 files changed** (+2 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+1 -1) </details> ### 📄 Description ## Description Fixes #5975 When using Open WebUI in widescreen mode, chat bubbles with YAML code blocks resize inconsistently when scrolling. This happens because min-w-full on the markdown-prose container combined with wide code block content (especially YAML with long keys/values) causes the container to expand beyond the parent bubble's max-w constraint. ## Root Cause The markdown-prose container in ResponseMessage.svelte and UserMessage.svelte uses min-w-full which allows code block content (with white-space: pre-wrap) to push the bubble width beyond its parent constraints during scroll/reflow cycles, causing inconsistent resizing. ## Fix Added overflow-hidden to the markdown-prose container div in both: - src/lib/components/chat/Messages/ResponseMessage.svelte - src/lib/components/chat/Messages/UserMessage.svelte This constrains content to stay within the bubble boundaries without affecting the visual rendering of code blocks (which scroll horizontally already). ## Testing 1. Open Open WebUI in widescreen mode 2. Send a message containing a YAML code block (e.g., paste content from https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml) 3. Scroll up and down 4. Observe that bubble sizes remain consistent (before fix, they would change on scroll) ## Checklist - [x] Targets dev branch - [x] Fix is minimal and focused on the reported issue - [x] No new dependencies added - [x] Manually reproducible fix for the reported scroll behavior ### Contributor License Agreement - [x] By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. --- <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-05-21 17:12:06 -05:00

GiteaMirror closed this issue

2026-05-21 17:12:14 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#131554