[PR #23460] [CLOSED] fix: consistent chat message bubble widths in widescreen mode #42838

New Issue

GiteaMirror · 2026-04-25T14:37:32-05:00

GiteaMirror commented

2026-04-25 14:37:32 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/23460
Author: @chernistry
Created: 4/6/2026
Status: ❌ Closed

Base: main ← Head: fix/consistent-chat-bubble-sizes

📝 Commits (1)

a367a8c fix: consistent chat message bubble widths in widescreen mode

📊 Changes

1 file changed (+1 additions, -1 deletions)

View changed files

📝 src/app.css (+1 -1)

📄 Description

Summary

Fixes the inconsistent conversation bubble sizing reported in #5975.

The root cause is that the .markdown-prose class applies Tailwind's prose plugin, which sets a default max-width: 65ch. This conflicts with the explicit w-full min-w-full on message containers. When content like YAML code blocks exceeds the 65ch character limit, the prose max-width constraint causes the bubble to resize inconsistently as the browser recalculates layout during scrolling.

The fix adds max-w-none to .markdown-prose, removing the prose plugin's default max-width. The parent Message component already controls the overall container width via max-w-5xl (normal mode) or max-w-full (widescreen mode), so no additional width constraint is needed on the prose wrapper. Code blocks continue to handle horizontal overflow correctly via their existing overflow-x-auto.

Changes

src/app.css: Added max-w-none to .markdown-prose class

Fixes #5975

_{🔄 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/23460 **Author:** [@chernistry](https://github.com/chernistry) **Created:** 4/6/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/consistent-chat-bubble-sizes` --- ### 📝 Commits (1) - [`a367a8c`](https://github.com/open-webui/open-webui/commit/a367a8c7d75a4dfe3ef89e0c944aee986d62519d) fix: consistent chat message bubble widths in widescreen mode ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `src/app.css` (+1 -1) </details> ### 📄 Description ## Summary Fixes the inconsistent conversation bubble sizing reported in #5975. The root cause is that the `.markdown-prose` class applies Tailwind's `prose` plugin, which sets a default `max-width: 65ch`. This conflicts with the explicit `w-full min-w-full` on message containers. When content like YAML code blocks exceeds the 65ch character limit, the prose max-width constraint causes the bubble to resize inconsistently as the browser recalculates layout during scrolling. The fix adds `max-w-none` to `.markdown-prose`, removing the prose plugin's default max-width. The parent `Message` component already controls the overall container width via `max-w-5xl` (normal mode) or `max-w-full` (widescreen mode), so no additional width constraint is needed on the prose wrapper. Code blocks continue to handle horizontal overflow correctly via their existing `overflow-x-auto`. ## Changes - `src/app.css`: Added `max-w-none` to `.markdown-prose` class Fixes #5975 --- <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-25 14:37:32 -05:00

GiteaMirror closed this issue

2026-04-25 14:37:33 -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#42838