## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/24391 **Author:** [@Samrj12](https://github.com/Samrj12) **Created:** 5/5/2026 **Status:** 🔄 Open **Base:** `dev` ← **Head:** `fix/source-overflow-badge-wrap` --- ### 📝 Commits (1) - [`ce904e1`](https://github.com/open-webui/open-webui/commit/ce904e10d7ba48de4a55fc495ef9b0d306ae1887) fix: prevent source overflow "+N" badge wrap for 2-digit values ### 📊 Changes **1 file changed** (+1 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Messages/Citations.svelte` (+1 -1) </details> ### 📄 Description # Pull Request Checklist **Before submitting, make sure you've checked the following:** - [x] **Target branch:** Verify that the pull request targets the `dev` branch. - [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. - [x] **Documentation:** No user-facing behavior, env var, public API, or deployment step changes — pure CSS adjustment to an existing component. - [x] **Dependencies:** No new or upgraded dependencies. - [x] **Testing:** Manually tested locally (see Additional Information below). - [x] **Agentic AI Code:** This PR has gone through additional human review and manual testing by the contributor before submission. - [x] **Code review:** Self-reviewed; one-line class change, scoped to a single component. - [x] **Design & Architecture:** No new settings or state introduced. - [x] **Git Hygiene:** Single atomic commit, rebased on `dev`. - [x] **Title Prefix:** \`fix:\` — bug fix. # Changelog Entry ### Description - Fixes a cosmetic bug in the citations row where the \`+N\` overflow badge wraps the second digit onto a new line for two-digit overflow counts (10+ sources). The badge container was hard-sized at \`size-4\` (16×16 px), which can't fit \`+10\` and above at the \`text-[8px]\` font size used. ### Fixed - \`src/lib/components/chat/Messages/Citations.svelte\`: the \`+N\` overflow indicator next to favicon previews now grows horizontally for multi-digit counts instead of wrapping. Single-digit overflows continue to render as a perfect circle, matching the favicon row visually. --- ### Additional Information **Reproduction (before fix):** 1. Send a chat message to a model that returns a response citing 10+ web sources. 2. Observe the citations row above the message: the overflow badge after the first 3 favicons renders the second digit on a new line. **After fix:** The badge stays on a single line for any overflow value; single-digit overflows still render as a 16×16 circle. **Implementation:** One-line class change on \`Citations.svelte:188\`: - \`size-4\` → \`min-w-4 h-4 px-1\` - Added \`whitespace-nowrap\` \`min-w-4\` keeps the perfect-circle look for single-digit values, \`px-1\` provides horizontal padding when the content grows, and \`whitespace-nowrap\` prevents wrapping as a defense-in-depth. ### Contributor License Agreement - [x] 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 commented

2026-05-06 12:53:29 -05:00

Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/24391
Author: @Samrj12
Created: 5/5/2026
Status: 🔄 Open

Base: dev ← Head: fix/source-overflow-badge-wrap

📝 Commits (1)

ce904e1 fix: prevent source overflow "+N" badge wrap for 2-digit values

📊 Changes

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

View changed files

📝 src/lib/components/chat/Messages/Citations.svelte (+1 -1)

📄 Description

Pull Request Checklist

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

Target branch: Verify that the pull request targets the dev branch.
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: No user-facing behavior, env var, public API, or deployment step changes — pure CSS adjustment to an existing component.
Dependencies: No new or upgraded dependencies.
Testing: Manually tested locally (see Additional Information below).
Agentic AI Code: This PR has gone through additional human review and manual testing by the contributor before submission.
Code review: Self-reviewed; one-line class change, scoped to a single component.
Design & Architecture: No new settings or state introduced.
Git Hygiene: Single atomic commit, rebased on dev.
Title Prefix: `fix:` — bug fix.

Changelog Entry

Description

Fixes a cosmetic bug in the citations row where the `+N` overflow badge wraps the second digit onto a new line for two-digit overflow counts (10+ sources). The badge container was hard-sized at `size-4` (16×16 px), which can't fit `+10` and above at the `text-[8px]` font size used.

Fixed

`src/lib/components/chat/Messages/Citations.svelte`: the `+N` overflow indicator next to favicon previews now grows horizontally for multi-digit counts instead of wrapping. Single-digit overflows continue to render as a perfect circle, matching the favicon row visually.

Additional Information

Reproduction (before fix):

Send a chat message to a model that returns a response citing 10+ web sources.
Observe the citations row above the message: the overflow badge after the first 3 favicons renders the second digit on a new line.

After fix: The badge stays on a single line for any overflow value; single-digit overflows still render as a 16×16 circle.

Implementation: One-line class change on `Citations.svelte:188`:

`size-4` → `min-w-4 h-4 px-1`
Added `whitespace-nowrap`

`min-w-4` keeps the perfect-circle look for single-digit values, `px-1` provides horizontal padding when the content grows, and `whitespace-nowrap` prevents wrapping as a defense-in-depth.

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.}

GiteaMirror added the pull-request label 2026-05-06 12:53:29 -05:00

[PR #24391] fix: source overflow "+N" badge wraps for 2-digit values #66494