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

New Issue

GiteaMirror · 2026-04-20T06:36:58-05:00

GiteaMirror commented

2026-04-20 06:36:58 -05:00

📋 Pull Request Information

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

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

📝 Commits (1)

e0bc3e3 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

Description

When scrolling through a conversation in widescreen mode that contains YAML code blocks, the message bubble widths change inconsistently. This creates a jarring layout shift where bubbles appear to resize as you scroll up and down.

Root Cause

The message bubble containers were using min-w-full which forces the element to be at least as wide as its parent — but in a flex context, this prevented the bubbles from shrinking below their content's intrinsic size. When a YAML (or any wide) code block renders, it pushes the bubble out, causing layout reflow on scroll.

The fix is min-w-0, which is the correct Tailwind class for flex children that need to shrink properly. Without it, flexbox children don't shrink below their content width.

Changes

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

Testing

Reproduced with the YAML preset from the issue:
https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml

Bubble widths remain consistent while scrolling in widescreen mode after the fix.

Fixes #5975

contributor license agreement

_{🔄 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/22363 **Author:** [@realsamrat](https://github.com/realsamrat) **Created:** 3/7/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/yaml-codeblock-bubble-width` --- ### 📝 Commits (1) - [`e0bc3e3`](https://github.com/open-webui/open-webui/commit/e0bc3e3fdca1f9029b1b620c8da1104bf9c9e904) 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 ## Description When scrolling through a conversation in widescreen mode that contains YAML code blocks, the message bubble widths change inconsistently. This creates a jarring layout shift where bubbles appear to resize as you scroll up and down. ## Root Cause The message bubble containers were using `min-w-full` which forces the element to be at least as wide as its parent — but in a flex context, this prevented the bubbles from shrinking below their content's intrinsic size. When a YAML (or any wide) code block renders, it pushes the bubble out, causing layout reflow on scroll. The fix is `min-w-0`, which is the correct Tailwind class for flex children that need to shrink properly. Without it, flexbox children don't shrink below their content width. ## Changes - `ResponseMessage.svelte`: replaced `min-w-full` with `min-w-0` on the message content container and added `min-w-0` to the flex wrapper - `UserMessage.svelte`: same fix applied to user bubble containers ## Testing Reproduced with the YAML preset from the issue: https://github.com/ChatLunaLab/chatluna-character/blob/main/resources/presets/default.yml Bubble widths remain consistent while scrolling in widescreen mode after the fix. Fixes #5975 contributor license agreement --- <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:36:58 -05:00

GiteaMirror closed this issue

2026-04-20 06:36:59 -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#26634