[PR #21635] [CLOSED] fix: consistent bubble sizes with YAML code blocks in widescreen #65029

New Issue

GiteaMirror · 2026-05-06T10:47:16-05:00

GiteaMirror commented

2026-05-06 10:47:16 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21635
Author: @hztBUAA
Created: 2/20/2026
Status: ❌ Closed

Base: main ← Head: fix/yaml-code-block-bubble-size

📝 Commits (1)

e38d70e fix: consistent conversation bubble sizes with YAML code blocks in widescreen mode

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

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

📄 Description

Summary

Fixes #5975

In widescreen mode, conversation bubbles resize inconsistently when messages contain YAML (or other long-line) code blocks. This happens because the code block's outer <div> wrapper has no width or overflow constraints, allowing the intrinsic width of long code lines to propagate up and influence the parent bubble's layout during scroll reflows.

Changes

Added max-w-full overflow-hidden to the outermost <div> of CodeBlock.svelte
max-w-full ensures the code block never exceeds its parent container's width
overflow-hidden prevents code content from expanding the bubble; the inner <pre> element already provides horizontal scrolling via overflow-x-auto

Test Plan

Open a chat in widescreen mode
Send or view a message containing a YAML code block with long lines (e.g. from this file)
Scroll up and down the page
Verify that conversation bubble widths remain consistent and do not change while scrolling

_{🔄 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/21635 **Author:** [@hztBUAA](https://github.com/hztBUAA) **Created:** 2/20/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/yaml-code-block-bubble-size` --- ### 📝 Commits (1) - [`e38d70e`](https://github.com/open-webui/open-webui/commit/e38d70ec6d0df2b76677c8ab705a549a84626c74) fix: consistent conversation bubble sizes with YAML code blocks in widescreen mode ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/CodeBlock.svelte` (+1 -1) </details> ### 📄 Description ## Summary Fixes #5975 In widescreen mode, conversation bubbles resize inconsistently when messages contain YAML (or other long-line) code blocks. This happens because the code block's outer `<div>` wrapper has no width or overflow constraints, allowing the intrinsic width of long code lines to propagate up and influence the parent bubble's layout during scroll reflows. ## Changes - Added `max-w-full overflow-hidden` to the outermost `<div>` of `CodeBlock.svelte` - `max-w-full` ensures the code block never exceeds its parent container's width - `overflow-hidden` prevents code content from expanding the bubble; the inner `<pre>` element already provides horizontal scrolling via `overflow-x-auto` ## Test Plan - Open a chat in widescreen mode - Send or view a message containing a YAML code block with long lines (e.g. from [this file](https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml)) - Scroll up and down the page - Verify that conversation bubble widths remain consistent and do not change while scrolling --- <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-06 10:47:16 -05:00

GiteaMirror closed this issue

2026-05-06 10:47:19 -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#65029