## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/19172 **Author:** [@saikirankanakala](https://github.com/saikirankanakala) **Created:** 11/13/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `issue-5975-bubble-width-1` --- ### 📝 Commits (1) - [`cb4e3c4`](https://github.com/open-webui/open-webui/commit/cb4e3c45d323945d1eca0ea0ae81d75cf532fb29) fix(ui): prevent conversation bubble width jumping with code blocks in widescreen mode ### 📊 Changes **2 files changed** (+93 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/app.css` (+54 -0) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+39 -0) </details> ### 📄 Description # Pull Request: Fix conversation bubble width jumping with YAML/code blocks in widescreen mode ## Description This PR fixes an inconsistent UI behavior where conversation bubbles resize erratically when scrolling through chats containing YAML or other code blocks in widescreen mode with chat bubbles enabled. ### Problem When both **Widescreen Mode** and **Chat Bubble UI** are enabled, code blocks (especially YAML) cause conversation bubbles to jump in width during scrolling. This creates a jarring user experience and makes conversations difficult to read. ### Solution Implemented CSS-based fix that: - Locks bubble width in widescreen mode - Uses CSS containment to isolate code block rendering - Adds GPU acceleration to prevent layout thrashing - Ensures code blocks scroll horizontally instead of forcing bubble resize ## Type of Change - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update ## Fixes Closes #5975 ## Testing ### Test Environment - **OS**: Windows 11, macOS, Linux - **Browser**: Chrome 130.x, Firefox, Safari - **Open WebUI Version**: Latest dev branch ### Test Scenarios Completed - [x] Chat Bubble UI enabled + Widescreen Mode enabled - [x] YAML code blocks (using example from issue) - [x] Python, JavaScript, and other code block types - [x] Scrolling up and down through conversations - [x] Multiple code blocks in single conversation - [x] Long code blocks requiring horizontal scroll - [x] Mobile/tablet responsive views (no regression) - [x] Dark mode and light mode - [x] Chat Bubble UI disabled (no regression) - [x] Widescreen Mode disabled (no regression) ### Results - ✅ Conversation bubbles maintain consistent width during scroll - ✅ No layout shifts or jumps - ✅ Code blocks scroll horizontally as expected - ✅ No regressions in other modes ## Screenshots/Videos ### Before Fix [Upload screen recording showing bubbles resizing during scroll] ### After Fix [Upload screen recording showing stable bubble widths] ## Checklist - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation (if applicable) - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works (if applicable) - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules ## Additional Context ### Why CSS-only approach? - Minimal code changes reduce risk - Leverages browser-native APIs - No modifications to component logic - Easier to review and maintain ### Previous Attempts This builds upon insights from previous PRs: - #16473 by @josharsh - #16553, #16554, #16604 by @Rain6435 ## Contributor License Agreement By submitting this pull request, I confirm that my contribution is made under the terms of the project's license and I agree to the Contributor License Agreement. I hereby agree to the terms of the Contributor License Agreement as outlined in the project documentation. I understand that my contributions will be licensed under the same license as the project. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror commented

2026-04-25 13:12:09 -05:00

Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/19172
Author: @saikirankanakala
Created: 11/13/2025
Status: ❌ Closed

Base: dev ← Head: issue-5975-bubble-width-1

📝 Commits (1)

cb4e3c4 fix(ui): prevent conversation bubble width jumping with code blocks in widescreen mode

📊 Changes

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

View changed files

📝 src/app.css (+54 -0)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+39 -0)

📄 Description

Pull Request: Fix conversation bubble width jumping with YAML/code blocks in widescreen mode

Description

This PR fixes an inconsistent UI behavior where conversation bubbles resize erratically when scrolling through chats containing YAML or other code blocks in widescreen mode with chat bubbles enabled.

Problem

When both Widescreen Mode and Chat Bubble UI are enabled, code blocks (especially YAML) cause conversation bubbles to jump in width during scrolling. This creates a jarring user experience and makes conversations difficult to read.

Solution

Implemented CSS-based fix that:

Locks bubble width in widescreen mode
Uses CSS containment to isolate code block rendering
Adds GPU acceleration to prevent layout thrashing
Ensures code blocks scroll horizontally instead of forcing bubble resize

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update

Fixes

Closes #5975

Testing

Test Environment

OS: Windows 11, macOS, Linux
Browser: Chrome 130.x, Firefox, Safari
Open WebUI Version: Latest dev branch

Test Scenarios Completed

Chat Bubble UI enabled + Widescreen Mode enabled
YAML code blocks (using example from issue)
Python, JavaScript, and other code block types
Scrolling up and down through conversations
Multiple code blocks in single conversation
Long code blocks requiring horizontal scroll
Mobile/tablet responsive views (no regression)
Dark mode and light mode
Chat Bubble UI disabled (no regression)
Widescreen Mode disabled (no regression)

Results

✅ Conversation bubbles maintain consistent width during scroll
✅ No layout shifts or jumps
✅ Code blocks scroll horizontally as expected
✅ No regressions in other modes

Screenshots/Videos

Before Fix

[Upload screen recording showing bubbles resizing during scroll]

After Fix

[Upload screen recording showing stable bubble widths]

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation (if applicable)
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works (if applicable)
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

Additional Context

Why CSS-only approach?

Minimal code changes reduce risk
Leverages browser-native APIs
No modifications to component logic
Easier to review and maintain

Previous Attempts

This builds upon insights from previous PRs:

#16473 by @josharsh
#16553, #16554, #16604 by @Rain6435

Contributor License Agreement

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license and I agree to the Contributor License Agreement.

I hereby agree to the terms of the Contributor License Agreement as outlined in the project documentation. I understand that my contributions will be licensed under the same license as the project.

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

GiteaMirror added the pull-request label 2026-04-25 13:12:09 -05:00

GiteaMirror closed this issue

2026-04-25 13:12:10 -05:00

[PR #19172] [CLOSED] fix(ui): prevent conversation bubble width jumping with code blocks i… #40747