github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 10:58:17 -05:00
Code Issues 1.3k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #5975] Inconsistent Conversation Bubble Sizes with YAML Code Blocks in Widescreen Mode #14193

New Issue
Open
opened 2026-04-19 20:38:11 -05:00 by GiteaMirror · 7 comments
GiteaMirror commented 2026-04-19 20:38:11 -05:00
Owner
Copy Link

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:

  • 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.

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.
    chrome_iOqq4s2gEJ
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. ![chrome_iOqq4s2gEJ](https://github.com/user-attachments/assets/bb3d0d62-631a-470e-8de5-dc201f6325d7)
GiteaMirror added the buggood first issuehelp wanted labels 2026-04-19 20:38:11 -05:00
GiteaMirror commented 2026-04-19 20:38:12 -05:00
Author
Owner
Copy Link

@lehhair commented on GitHub (Oct 25, 2024):

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.
GiteaMirror commented 2026-04-19 20:38:13 -05:00
Author
Owner
Copy Link

@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!

<!-- 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!
GiteaMirror commented 2026-04-19 20:38:13 -05:00
Author
Owner
Copy Link

@geniusjoelraj commented on GitHub (Jul 27, 2025):

Hey I can work on this, Is this still relevant?

<!-- gh-comment-id:3124390277 --> @geniusjoelraj commented on GitHub (Jul 27, 2025): Hey I can work on this, Is this still relevant?
GiteaMirror commented 2026-04-19 20:38:13 -05:00
Author
Owner
Copy Link

@anugrahrk commented on GitHub (Aug 23, 2025):

resolved? if not i can work on this.

<!-- gh-comment-id:3217176292 --> @anugrahrk commented on GitHub (Aug 23, 2025): resolved? if not i can work on this.
GiteaMirror commented 2026-04-19 20:38:14 -05:00
Author
Owner
Copy Link

@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.

Image

@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!
GiteaMirror commented 2026-04-19 20:38:14 -05:00
Author
Owner
Copy Link

@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.

<!-- 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.
GiteaMirror commented 2026-04-19 20:38:15 -05:00
Author
Owner
Copy Link

@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.

<!-- 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.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label bug good first issue help wanted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#14193
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?