[PR #16604] [CLOSED] fix: Conversation bubble width jumping with YAML code blocks in wides… #63037

New Issue

GiteaMirror · 2026-05-06T07:34:14-05:00

GiteaMirror commented

2026-05-06 07:34:14 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/16604
Author: @Rain6435
Created: 8/14/2025
Status: ❌ Closed

Base: dev ← Head: fix/issue-5975-conversation-bubble-sizing-final

📝 Commits (5)

d880a91 fix: Conversation bubble width jumping with YAML code blocks in widescreen mode
7d29f64 Merge origin/dev into fix/issue-5975-conversation-bubble-sizing-final
c6362f1 Formatting issue.
e773420 restore: Add back missing static files
8130823 Formatting issue and cleanup.

📊 Changes

4 files changed (+795 additions, -371 deletions)

View changed files

📝 src/lib/components/chat/Messages/CodeBlock.svelte (+223 -74)
📝 src/lib/components/chat/Messages/Message.svelte (+245 -75)
📝 src/lib/components/chat/Messages/UserMessage.svelte (+243 -221)
📝 src/lib/components/common/CodeEditor.svelte (+84 -1)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in

Discussions and describe your changes before submitting a pull
request.

Before submitting, make sure you've checked the following:

Target branch: Please verify that the pull request targets the dev branch.
Description: Provide a concise description of the changes made in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is
added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or
other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests to validate the changes?
Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring
adherence to the project's coding standards?
Prefix: To clearly categorize this pull request, prefix the pull request title using one of the following:
- fix: Fixes a bug or resolves an issue in the codebase

Changelog Entry

Description

This PR fixes the conversation bubble width jumping issue with YAML code blocks in widescreen mode. The problem occurred
when long YAML content caused automatic width expansion, leading to inconsistent bubble sizes during scrolling. The solution
implements strict width controls and forces horizontal overflow instead of automatic width adjustment.

Fixed

Fixed conversation bubble width jumping when scrolling with YAML code blocks containing long lines
Fixed automatic width expansion logic that caused inconsistent bubble sizes in widescreen mode
Fixed CodeMirror line wrapping behavior that triggered layout shifts with wide content
Fixed lack of horizontal scrolling in code blocks with overflow content

Changed

Implemented strict width control system for message bubbles with fixed 1152px default width
Removed CodeMirror line wrapping to force horizontal overflow instead of width expansion
Added CSS containment rules and !important declarations to lock bubble dimensions
Enhanced code block containers with immutable width constraints
Preserved manual resize functionality for user control while preventing automatic changes

Technical Details

Removed EditorView.lineWrapping from CodeMirror configuration
Added white-space: nowrap and overflow-x: auto to force horizontal scrolling
Implemented contain: layout to prevent child elements from affecting parent dimensions
Added strict CSS rules with !important to lock width properties
Enhanced resize handlers to only allow manual width changes

Additional Information

Fixes #5975

Test Plan

Create a chat with YAML content containing long lines (e.g., long URLs, configuration strings)
Verify that conversation bubbles maintain consistent width while scrolling
Test that horizontal scrollbars appear in code blocks for overflow content
Verify manual resize functionality still works for adjusting bubble width
Test behavior in both widescreen and normal modes
Confirm no width jumping occurs when YAML code blocks come into view during scrolling

Screenrecording

https://github.com/user-attachments/assets/767b9092-3e7d-4cb4-92de-bf5840df2944

Testing Steps

Take the exact YAML provided in the issue and paste in a chat. Trying moving around vertically to try to trigger unwanted width expansions. Should not happen.
Use width expansion bars to change width of messages.
Notice that the Collapse/Expand button and Copy button stay apparent even though the user is scrolling down. This removes the hindrance of having to scroll all the to the top to collapse or copy.

Verify the fix:
- Paste the YAML content in a chat message
- Scroll down until the code block is out of view
- Scroll back up and observe that the bubble width remains consistent
- Check that horizontal scrollbars appear in the code block
- Test manual resize functionality by dragging bubble edges

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to
the /CONTRIBUTOR_LICENSE_AGREEMENT, 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/16604 **Author:** [@Rain6435](https://github.com/Rain6435) **Created:** 8/14/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `fix/issue-5975-conversation-bubble-sizing-final` --- ### 📝 Commits (5) - [`d880a91`](https://github.com/open-webui/open-webui/commit/d880a91af6e2717167b0524dc3169d3196f59dd7) fix: Conversation bubble width jumping with YAML code blocks in widescreen mode - [`7d29f64`](https://github.com/open-webui/open-webui/commit/7d29f64281f84137c132ffd249bb7a483e03c9dc) Merge origin/dev into fix/issue-5975-conversation-bubble-sizing-final - [`c6362f1`](https://github.com/open-webui/open-webui/commit/c6362f1952ea5de258a7c3851acc2e02c21a7dd4) Formatting issue. - [`e773420`](https://github.com/open-webui/open-webui/commit/e7734204cc1699724aa1501022dd44a94956bc05) restore: Add back missing static files - [`8130823`](https://github.com/open-webui/open-webui/commit/8130823a26bcef6fdaf134ad70dce576ada3e966) Formatting issue and cleanup. ### 📊 Changes **4 files changed** (+795 additions, -371 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/CodeBlock.svelte` (+223 -74) 📝 `src/lib/components/chat/Messages/Message.svelte` (+245 -75) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+243 -221) 📝 `src/lib/components/common/CodeEditor.svelte` (+84 -1) </details> ### 📄 Description # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) and describe your changes before submitting a pull request. **Before submitting, make sure you've checked the following:** * [x] **Target branch:** Please verify that the pull request targets the `dev` branch. * [x] **Description:** Provide a concise description of the changes made in this pull request. * [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. * [x] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources? * [x] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation? * [x] **Testing:** Have you written and run sufficient tests to validate the changes? * [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards? * [x] **Prefix:** To clearly categorize this pull request, prefix the pull request title using one of the following: * **fix**: Fixes a bug or resolves an issue in the codebase # Changelog Entry ### Description This PR fixes the conversation bubble width jumping issue with YAML code blocks in widescreen mode. The problem occurred when long YAML content caused automatic width expansion, leading to inconsistent bubble sizes during scrolling. The solution implements strict width controls and forces horizontal overflow instead of automatic width adjustment. ### Fixed * Fixed conversation bubble width jumping when scrolling with YAML code blocks containing long lines * Fixed automatic width expansion logic that caused inconsistent bubble sizes in widescreen mode * Fixed CodeMirror line wrapping behavior that triggered layout shifts with wide content * Fixed lack of horizontal scrolling in code blocks with overflow content ### Changed * Implemented strict width control system for message bubbles with fixed 1152px default width * Removed CodeMirror line wrapping to force horizontal overflow instead of width expansion * Added CSS containment rules and `!important` declarations to lock bubble dimensions * Enhanced code block containers with immutable width constraints * Preserved manual resize functionality for user control while preventing automatic changes ### Technical Details * Removed `EditorView.lineWrapping` from CodeMirror configuration * Added `white-space: nowrap` and `overflow-x: auto` to force horizontal scrolling * Implemented `contain: layout` to prevent child elements from affecting parent dimensions * Added strict CSS rules with `!important` to lock width properties * Enhanced resize handlers to only allow manual width changes ### Additional Information Fixes #5975 ### Test Plan * Create a chat with YAML content containing long lines (e.g., long URLs, configuration strings) * Verify that conversation bubbles maintain consistent width while scrolling * Test that horizontal scrollbars appear in code blocks for overflow content * Verify manual resize functionality still works for adjusting bubble width * Test behavior in both widescreen and normal modes * Confirm no width jumping occurs when YAML code blocks come into view during scrolling ### Screenrecording https://github.com/user-attachments/assets/767b9092-3e7d-4cb4-92de-bf5840df2944 ### Testing Steps * Take the exact YAML provided in the issue and paste in a chat. Trying moving around vertically to try to trigger unwanted width expansions. Should not happen. * Use width expansion bars to change width of messages. * Notice that the Collapse/Expand button and Copy button stay apparent even though the user is scrolling down. This removes the hindrance of having to scroll all the to the top to collapse or copy. 2. Verify the fix: - Paste the YAML content in a chat message - Scroll down until the code block is out of view - Scroll back up and observe that the bubble width remains consistent - Check that horizontal scrollbars appear in the code block - Test manual resize functionality by dragging bubble edges Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the /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-06 07:34:14 -05:00

GiteaMirror closed this issue

2026-05-06 07:34:17 -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#63037