[PR #22785] [CLOSED] fix: prevent inconsistent bubble sizes with code blocks in widescreen mode #49913

New Issue

GiteaMirror · 2026-04-30T02:20:45-05:00

GiteaMirror commented

2026-04-30 02:20:45 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/22785
Author: @tysoncung
Created: 3/18/2026
Status: ❌ Closed

Base: main ← Head: fix/inconsistent-bubble-sizes-yaml-5975

📝 Commits (1)

9eba093 fix: prevent inconsistent bubble sizes with code blocks in widescreen mode

📊 Changes

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

View changed files

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

📄 Description

Description

Fixes #5975

This PR fixes the inconsistent conversation bubble sizes when scrolling in widescreen mode with YAML code blocks (or any wide code content).

Problem

When scrolling the page with code blocks containing wide content (like YAML), the conversation bubble container was changing size inconsistently. This was caused by the browser recalculating flex layout dimensions as overflow-x: auto content was measured during scroll.

Solution

Added min-w-0 (min-width: 0) to flex containers that hold message content. This is a standard CSS technique to prevent flex items from expanding beyond their flex basis when they contain overflow content.

Changes

ResponseMessage.svelte: Added min-w-0 to flex containers
UserMessage.svelte: Added min-w-0 to flex containers
MultiResponseMessages.svelte: Changed min-w-full to min-w-0 for proper overflow constraint

Testing

The fix maintains the intended behavior:

Normal mode: max-w-5xl constraint works correctly
Widescreen mode: max-w-full works correctly
Scrolling: Bubble sizes remain stable regardless of code block content width

Technical Details

The min-w-0 utility prevents flex children from overriding their parent's width constraints when they contain wide scrollable content. Without it, flexbox allows items to grow beyond their container to accommodate content, causing layout shifts during scroll.

_{🔄 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/22785 **Author:** [@tysoncung](https://github.com/tysoncung) **Created:** 3/18/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/inconsistent-bubble-sizes-yaml-5975` --- ### 📝 Commits (1) - [`9eba093`](https://github.com/open-webui/open-webui/commit/9eba093827af4ae4208b3c84d3896326b9f4a606) fix: prevent inconsistent bubble sizes with code blocks in widescreen mode ### 📊 Changes **3 files changed** (+5 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/MultiResponseMessages.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+2 -2) 📝 `src/lib/components/chat/Messages/UserMessage.svelte` (+2 -2) </details> ### 📄 Description ## Description Fixes #5975 This PR fixes the inconsistent conversation bubble sizes when scrolling in widescreen mode with YAML code blocks (or any wide code content). ## Problem When scrolling the page with code blocks containing wide content (like YAML), the conversation bubble container was changing size inconsistently. This was caused by the browser recalculating flex layout dimensions as `overflow-x: auto` content was measured during scroll. ## Solution Added `min-w-0` (min-width: 0) to flex containers that hold message content. This is a standard CSS technique to prevent flex items from expanding beyond their flex basis when they contain overflow content. ## Changes - **ResponseMessage.svelte**: Added `min-w-0` to flex containers - **UserMessage.svelte**: Added `min-w-0` to flex containers - **MultiResponseMessages.svelte**: Changed `min-w-full` to `min-w-0` for proper overflow constraint ## Testing The fix maintains the intended behavior: - Normal mode: `max-w-5xl` constraint works correctly - Widescreen mode: `max-w-full` works correctly - Scrolling: Bubble sizes remain stable regardless of code block content width ## Technical Details The `min-w-0` utility prevents flex children from overriding their parent's width constraints when they contain wide scrollable content. Without it, flexbox allows items to grow beyond their container to accommodate content, causing layout shifts during scroll. --- <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 02:20:45 -05:00

GiteaMirror closed this issue

2026-04-30 02:20:47 -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#49913