I have read and followed all instructions provided in the README.md.
I am using the latest version of Open WebUI.
I have included browser console logs.
I have included Docker container logs.
I have provided detailed steps to reproduce the error in the "Reproduction Steps" section.
Expected Behavior:
When scrolling the page in widescreen mode, the size of the conversation bubbles should remain consistent.
Actual Behavior:
In widescreen mode, when the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently when scrolling up and down.
Bug Summary:
When scrolling in widescreen mode, if the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently.
Observe the inconsistent change in the size of the conversation bubbles.
Originally created by @lehhair on GitHub (Oct 7, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/5975
**Bug Report**
**Installation Method:**
docker
**Environment:**
- **Open WebUI Version:** v0.3.32
- **Operating System:** Windows 11
- **Browser:** Chrome 129.0.6668.90
**Confirmation:**
- [x] I have read and followed all instructions provided in the README.md.
- [x] I am using the latest version of Open WebUI.
- [ ] I have included browser console logs.
- [ ] I have included Docker container logs.
- [x] I have provided detailed steps to reproduce the error in the "Reproduction Steps" section.
**Expected Behavior:**
When scrolling the page in widescreen mode, the size of the conversation bubbles should remain consistent.
**Actual Behavior:**
In widescreen mode, when the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently when scrolling up and down.
**Bug Summary:**
When scrolling in widescreen mode, if the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently.
**Reproduction Details:**
**Reproduction Steps:**
1. Open Open WebUI in widescreen mode.
2. Enter a message containing a YAML code block. Not all YAML will cause this issue; the following example will: https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml
3. Scroll up and down the page.
4. Observe the inconsistent change in the size of the conversation bubbles.
Perhaps it is caused by the display of new code blocks, which will reappear in many cases.
<!-- gh-comment-id:2436905819 -->
@lehhair commented on GitHub (Oct 25, 2024):
Perhaps it is caused by the display of new code blocks, which will reappear in many cases.
Until the latest version this problem still exists, and I found that code blocks are not colored when writing py instead of python, hopefully this can be optimized!
<!-- gh-comment-id:2525777672 -->
@lehhair commented on GitHub (Dec 8, 2024):
Until the latest version this problem still exists, and I found that code blocks are not colored when writing ```py instead of ```python, hopefully this can be optimized!
I confirmed this issue internally last month, but only just now stumbled across this issue post based on the title. I clicked upon it and knew it was an instant match of the same issue I reported. Turns out your issue post opened up here is actually 1 year older though!
To add more context about this issue, I believe both Chat Bubble UI and Widescreen Mode UI options need to be toggled on within the Interface user settings to see the code blocks resize issue described. The resizing of code blocks only happens while scrolling through code blocks previously provided in my queries sent to the model within a chat. This issue should still be reproducible.
@geniusjoelraj, @anugrahrk This issue has not been resolved yet and a PR is definitely welcome!
<!-- gh-comment-id:3426902063 -->
@silentoplayz commented on GitHub (Oct 21, 2025):
I confirmed this issue internally last month, but only just now stumbled across this issue post based on the title. I clicked upon it and knew it was an instant match of the same issue I reported. Turns out your issue post opened up here is actually **1 year older** though!
To add more context about this issue, I believe both `Chat Bubble UI` and `Widescreen Mode` UI options need to be toggled on within the `Interface` user settings to see the code blocks resize issue described. The resizing of code blocks only happens while scrolling through code blocks previously provided in my queries sent to the model within a chat. This issue should still be reproducible.
<img width="1102" height="871" alt="Image" src="https://github.com/user-attachments/assets/bc4255e6-8648-4aa9-a3f6-7cb7d5a95e18" />
@geniusjoelraj, @anugrahrk This issue **has not** been resolved **yet** and a PR is definitely welcome!
I'm interested in working on this issue. Could you provide more context about what you're looking for? Any additional details about requirements or constraints would be helpful.
<!-- gh-comment-id:3644880199 -->
@tysoncung commented on GitHub (Dec 12, 2025):
I'm interested in working on this issue. Could you provide more context about what you're looking for? Any additional details about requirements or constraints would be helpful.
Replaces restrictive min-w-full usage with min-w-0 in the affected message wrappers.
Adds min-w-0 on the message/bubble containers in widescreen chat bubble layouts to prevent width expansion from long YAML/code lines.
This keeps bubble widths stable while scrolling in widescreen mode with code blocks.
<!-- gh-comment-id:3950200196 -->
@theamodhshetty commented on GitHub (Feb 24, 2026):
I opened a fix PR for this: #21819.
Summary:
- Replaces restrictive min-w-full usage with min-w-0 in the affected message wrappers.
- Adds min-w-0 on the message/bubble containers in widescreen chat bubble layouts to prevent width expansion from long YAML/code lines.
This keeps bubble widths stable while scrolling in widescreen mode with code blocks.
Also add a white-space: pre-wrap for YAML specifically to handle long lines gracefully.
<!-- gh-comment-id:4340222366 -->
@PHclaw commented on GitHub (Apr 29, 2026):
For the inconsistent conversation bubble sizes with YAML code blocks:
This is a CSS issue. YAML code blocks don't have the same max-width constraint as regular text. Fix:
```css
.message-bubble pre code {
max-width: 100%;
overflow-x: auto;
word-break: break-all;
}
.message-bubble {
max-width: 85%; /* consistent width */
min-width: 60px;
}
```
Also add a `white-space: pre-wrap` for YAML specifically to handle long lines gracefully.
Hi, I'd like to work on this issue. I’m currently investigating and will try to submit a fix.
<!-- gh-comment-id:4397462116 -->
@Parthpatel307 commented on GitHub (May 7, 2026):
Hi, I'd like to work on this issue. I’m currently investigating and will try to submit a fix.
This looks like a flex sizing issue rather than a YAML-specific rendering problem.
The message content containers currently use min-w-full, which is likely too strong in widescreen bubble mode when code blocks are present. Switching those containers to min-w-0 appears to resolve the width shifts while scrolling.
I’m putting together a minimal PR with just that change.
<!-- gh-comment-id:4440183980 -->
@linliang-bot commented on GitHub (May 13, 2026):
This looks like a flex sizing issue rather than a YAML-specific rendering problem.
The message content containers currently use `min-w-full`, which is likely too strong in widescreen bubble mode when code blocks are present. Switching those containers to `min-w-0` appears to resolve the width shifts while scrolling.
I’m putting together a minimal PR with just that change.
@Quantum0uasar commented on GitHub (May 18, 2026):
Hi! I'd like to work on this bug. The inconsistent bubble width with YAML code blocks in widescreen mode sounds like a CSS/layout constraint issue — likely the max-width or flex behavior isn't being applied consistently when code blocks are rendered. I have experience with frontend work (React/Svelte, CSS) and would be happy to dig into the stylesheet and submit a fix. Would it be okay if I take this on?
<!-- gh-comment-id:4482635633 -->
@Quantum0uasar commented on GitHub (May 18, 2026):
Hi! I'd like to work on this bug. The inconsistent bubble width with YAML code blocks in widescreen mode sounds like a CSS/layout constraint issue — likely the `max-width` or flex behavior isn't being applied consistently when code blocks are rendered. I have experience with frontend work (React/Svelte, CSS) and would be happy to dig into the stylesheet and submit a fix. Would it be okay if I take this on?
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Originally created by @lehhair on GitHub (Oct 7, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/5975
Bug Report
Installation Method:
docker
Environment:
Confirmation:
Expected Behavior:
When scrolling the page in widescreen mode, the size of the conversation bubbles should remain consistent.
Actual Behavior:
In widescreen mode, when the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently when scrolling up and down.
Bug Summary:
When scrolling in widescreen mode, if the chat includes YAML code blocks, the size of the conversation bubbles changes inconsistently.
Reproduction Details:
Reproduction Steps:
@lehhair commented on GitHub (Oct 25, 2024):
Perhaps it is caused by the display of new code blocks, which will reappear in many cases.
@lehhair commented on GitHub (Dec 8, 2024):
Until the latest version this problem still exists, and I found that code blocks are not colored when writing
py instead ofpython, hopefully this can be optimized!@geniusjoelraj commented on GitHub (Jul 27, 2025):
Hey I can work on this, Is this still relevant?
@anugrahrk commented on GitHub (Aug 23, 2025):
resolved? if not i can work on this.
@silentoplayz commented on GitHub (Oct 21, 2025):
I confirmed this issue internally last month, but only just now stumbled across this issue post based on the title. I clicked upon it and knew it was an instant match of the same issue I reported. Turns out your issue post opened up here is actually 1 year older though!
To add more context about this issue, I believe both
Chat Bubble UIandWidescreen ModeUI options need to be toggled on within theInterfaceuser settings to see the code blocks resize issue described. The resizing of code blocks only happens while scrolling through code blocks previously provided in my queries sent to the model within a chat. This issue should still be reproducible.@geniusjoelraj, @anugrahrk This issue has not been resolved yet and a PR is definitely welcome!
@tysoncung commented on GitHub (Dec 12, 2025):
I'm interested in working on this issue. Could you provide more context about what you're looking for? Any additional details about requirements or constraints would be helpful.
@theamodhshetty commented on GitHub (Feb 24, 2026):
I opened a fix PR for this: #21819.
Summary:
This keeps bubble widths stable while scrolling in widescreen mode with code blocks.
@PHclaw commented on GitHub (Apr 29, 2026):
For the inconsistent conversation bubble sizes with YAML code blocks:
This is a CSS issue. YAML code blocks don't have the same max-width constraint as regular text. Fix:
Also add a
white-space: pre-wrapfor YAML specifically to handle long lines gracefully.@Parthpatel307 commented on GitHub (May 7, 2026):
Hi, I'd like to work on this issue. I’m currently investigating and will try to submit a fix.
@linliang-bot commented on GitHub (May 13, 2026):
This looks like a flex sizing issue rather than a YAML-specific rendering problem.
The message content containers currently use
min-w-full, which is likely too strong in widescreen bubble mode when code blocks are present. Switching those containers tomin-w-0appears to resolve the width shifts while scrolling.I’m putting together a minimal PR with just that change.
@Quantum0uasar commented on GitHub (May 18, 2026):
Hi! I'd like to work on this bug. The inconsistent bubble width with YAML code blocks in widescreen mode sounds like a CSS/layout constraint issue — likely the
max-widthor flex behavior isn't being applied consistently when code blocks are rendered. I have experience with frontend work (React/Svelte, CSS) and would be happy to dig into the stylesheet and submit a fix. Would it be okay if I take this on?