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

[PR #21819] fix: stabilize chat bubble width with YAML code blocks in widescreen mode #49341

New Issue
Open
opened 2026-04-30 01:38:56 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-30 01:38:56 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21819
Author: @theamodhshetty
Created: 2/24/2026
Status: 🔄 Open

Base: dev ← Head: codex/fix-yaml-bubble-width-5975

📝 Commits (1)

  • 6196663 fix: stabilize chat bubble width for code blocks in widescreen

📊 Changes

4 files changed (+5 additions, -5 deletions)

View changed files

📝 src/lib/components/chat/Messages/Message.svelte (+1 -1)
📝 src/lib/components/chat/Messages/MultiResponseMessages.svelte (+1 -1)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+1 -1)
📝 src/lib/components/chat/Messages/UserMessage.svelte (+2 -2)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request.

This is to ensure large feature PRs are discussed with the community first, before starting work on it. If the community does not want this feature or it is not relevant for Open WebUI as a project, it can be identified in the discussion before working on the feature and submitting the PR.

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

  • Target branch: Verify that the pull request targets the dev branch. PRs targeting main will be immediately closed.
  • Description: Provide a concise description of the changes made in this pull request down below.
  • Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
  • Documentation: Add docs in Open WebUI Docs Repository. Document user-facing behavior, environment variables, public APIs/interfaces, or deployment steps.
  • Dependencies: No new dependencies were added or upgraded.
  • Testing: Performed validation for the touched frontend files and verified no formatting regressions (npx prettier --check ...) and frontend test command (npm run test:frontend, no tests discovered in this local run). Added reproducible before/after steps below.
  • Agentic AI Code: Changes were reviewed and validated before submission, with manual verification steps documented below.
  • Code review: Performed self-review for scope, style consistency, and side effects.
  • Design & Architecture: No new settings were introduced; this is a local layout bug fix.
  • Git Hygiene: PR is atomic and based on dev with a single logical change.
  • Title Prefix: PR title uses fix:.

Fixes #5975

This patch addresses chat bubble width instability in widescreen mode when messages include long YAML code blocks.

What changed:

  • Added min-w-0 to the message list item container in Message.svelte.
  • Replaced min-w-full with min-w-0 in markdown wrappers used by:
    • UserMessage.svelte
    • ResponseMessage.svelte
    • MultiResponseMessages.svelte
  • Added min-w-0 to the user chat bubble wrapper when chat bubbles are enabled.

Why this fixes the issue:

  • In flex layouts, children with min-width: auto/overly restrictive min widths can force expansion based on content width (e.g., wide code lines), which causes width jitter during render/scroll updates.
  • Applying min-w-0 allows the containers to shrink within their parent and keeps bubble sizing stable as content is measured and reflowed.

Reproduction steps:

  1. Enable Widescreen Mode and Chat Bubble UI.
  2. Send or load a message containing a long YAML code block (the sample from the issue reproduces reliably).
  3. Scroll through the conversation.

Before:

  • Bubble widths visibly expand/contract while scrolling around YAML blocks.

After:

  • Bubble widths remain stable and constrained by the existing layout max-width settings.

Changelog Entry

Description

  • Fix inconsistent chat bubble resizing in widescreen mode for conversations containing long YAML code blocks.

Added

  • None.

Changed

  • Updated chat message container min-width constraints from min-w-full to min-w-0 where appropriate.

Deprecated

  • None.

Removed

  • None.

Fixed

  • Eliminated bubble width jitter/reflow behavior during scroll in widescreen + chat bubble mode.

Security

  • None.

Breaking Changes

  • BREAKING CHANGE: None.

Additional Information

  • Scope intentionally kept small and focused on the affected message wrappers.
  • No backend, API, or dependency changes.

Screenshots or Videos

  • No screenshots were captured in this CLI environment.

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), 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/21819 **Author:** [@theamodhshetty](https://github.com/theamodhshetty) **Created:** 2/24/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `codex/fix-yaml-bubble-width-5975` --- ### 📝 Commits (1) - [`6196663`](https://github.com/open-webui/open-webui/commit/6196663a69fdc48ecba9a40593c86b0734890601) fix: stabilize chat bubble width for code blocks in widescreen ### 📊 Changes **4 files changed** (+5 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/Message.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/MultiResponseMessages.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+2 -2) </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) to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request. This is to ensure large feature PRs are discussed with the community first, before starting work on it. If the community does not want this feature or it is not relevant for Open WebUI as a project, it can be identified in the discussion before working on the feature and submitting the PR. **Before submitting, make sure you've checked the following:** - [x] **Target branch:** Verify that the pull request targets the `dev` branch. **PRs targeting `main` will be immediately closed.** - [x] **Description:** Provide a concise description of the changes made in this pull request down below. - [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. - [ ] **Documentation:** Add docs in [Open WebUI Docs Repository](https://github.com/open-webui/docs). Document user-facing behavior, environment variables, public APIs/interfaces, or deployment steps. - [x] **Dependencies:** No new dependencies were added or upgraded. - [x] **Testing:** Performed validation for the touched frontend files and verified no formatting regressions (`npx prettier --check ...`) and frontend test command (`npm run test:frontend`, no tests discovered in this local run). Added reproducible before/after steps below. - [x] **Agentic AI Code:** Changes were reviewed and validated before submission, with manual verification steps documented below. - [x] **Code review:** Performed self-review for scope, style consistency, and side effects. - [x] **Design & Architecture:** No new settings were introduced; this is a local layout bug fix. - [x] **Git Hygiene:** PR is atomic and based on `dev` with a single logical change. - [x] **Title Prefix:** PR title uses `fix:`. Fixes #5975 This patch addresses chat bubble width instability in widescreen mode when messages include long YAML code blocks. What changed: - Added `min-w-0` to the message list item container in `Message.svelte`. - Replaced `min-w-full` with `min-w-0` in markdown wrappers used by: - `UserMessage.svelte` - `ResponseMessage.svelte` - `MultiResponseMessages.svelte` - Added `min-w-0` to the user chat bubble wrapper when chat bubbles are enabled. Why this fixes the issue: - In flex layouts, children with `min-width: auto`/overly restrictive min widths can force expansion based on content width (e.g., wide code lines), which causes width jitter during render/scroll updates. - Applying `min-w-0` allows the containers to shrink within their parent and keeps bubble sizing stable as content is measured and reflowed. Reproduction steps: 1. Enable **Widescreen Mode** and **Chat Bubble UI**. 2. Send or load a message containing a long YAML code block (the sample from the issue reproduces reliably). 3. Scroll through the conversation. Before: - Bubble widths visibly expand/contract while scrolling around YAML blocks. After: - Bubble widths remain stable and constrained by the existing layout max-width settings. # Changelog Entry ### Description - Fix inconsistent chat bubble resizing in widescreen mode for conversations containing long YAML code blocks. ### Added - None. ### Changed - Updated chat message container min-width constraints from `min-w-full` to `min-w-0` where appropriate. ### Deprecated - None. ### Removed - None. ### Fixed - Eliminated bubble width jitter/reflow behavior during scroll in widescreen + chat bubble mode. ### Security - None. ### Breaking Changes - **BREAKING CHANGE**: None. --- ### Additional Information - Scope intentionally kept small and focused on the affected message wrappers. - No backend, API, or dependency changes. ### Screenshots or Videos - No screenshots were captured in this CLI environment. ### Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/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-04-30 01:38:56 -05:00
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 pull-request
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#49341
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?