[PR #22366] [CLOSED] fix: prevent code blocks from causing message bubble width inconsistency in widescreen #26637

New Issue

GiteaMirror · 2026-04-20T06:37:03-05:00

GiteaMirror commented

2026-04-20 06:37:03 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/22366
Author: @realsamrat
Created: 3/7/2026
Status: ❌ Closed

Base: dev ← Head: fix/yaml-codeblock-bubble-width

📝 Commits (1)

594c09a fix: prevent code blocks from causing message bubble width inconsistency

📊 Changes

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

View changed files

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

📄 Description

Pull Request Checklist

Target branch: This PR targets the dev branch.
Description: Concise description of changes provided below.
Testing: Manually reproduced the issue using the YAML preset linked in #5975 and verified bubble widths stay consistent while scrolling in widescreen mode.
Code review: Self-reviewed — minimal, focused CSS fix only.
Git Hygiene: Single commit, rebased cleanly on dev (1 commit ahead of upstream).

Changelog Entry

Description

Fixes inconsistent message bubble widths when scrolling through conversations containing YAML (or other wide) code blocks in widescreen mode.

Root cause: min-w-full on flex children forces a minimum width equal to the parent container. Without min-w-0, flex children cannot shrink below their intrinsic content size — so wide code blocks push the bubble container wider than intended, causing layout reflow on scroll.

Fixed

ResponseMessage.svelte: replaced min-w-full with min-w-0 on message content containers; added min-w-0 to flex wrapper
UserMessage.svelte: same fix applied to user bubble and edit containers

Additional Information

Fixes issue: Voice mode seems to be broken on desktop web browsers (#5975)
Reproduced with: https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml
Both files are part of the same fix — they are the two sides of every conversation (user + response). Fixing only one would leave the UI in a broken half-fixed state.

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/22366 **Author:** [@realsamrat](https://github.com/realsamrat) **Created:** 3/7/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `fix/yaml-codeblock-bubble-width` --- ### 📝 Commits (1) - [`594c09a`](https://github.com/open-webui/open-webui/commit/594c09a04786e7a08c22b7a965f9082b16d76d59) fix: prevent code blocks from causing message bubble width inconsistency ### 📊 Changes **2 files changed** (+5 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+2 -2) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+3 -3) </details> ### 📄 Description  # Pull Request Checklist - [x] **Target branch:** This PR targets the `dev` branch. - [x] **Description:** Concise description of changes provided below. - [x] **Testing:** Manually reproduced the issue using the YAML preset linked in #5975 and verified bubble widths stay consistent while scrolling in widescreen mode. - [x] **Code review:** Self-reviewed — minimal, focused CSS fix only. - [x] **Git Hygiene:** Single commit, rebased cleanly on `dev` (1 commit ahead of upstream). # Changelog Entry ### Description Fixes inconsistent message bubble widths when scrolling through conversations containing YAML (or other wide) code blocks in widescreen mode. **Root cause:** `min-w-full` on flex children forces a minimum width equal to the parent container. Without `min-w-0`, flex children cannot shrink below their intrinsic content size — so wide code blocks push the bubble container wider than intended, causing layout reflow on scroll. ### Fixed - `ResponseMessage.svelte`: replaced `min-w-full` with `min-w-0` on message content containers; added `min-w-0` to flex wrapper - `UserMessage.svelte`: same fix applied to user bubble and edit containers --- ### Additional Information - Fixes #5975 - Reproduced with: https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml - Both files are part of the same fix — they are the two sides of every conversation (user + response). Fixing only one would leave the UI in a broken half-fixed state. ### 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-20 06:37:03 -05:00

GiteaMirror closed this issue

2026-04-20 06:37:03 -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#26637