When a chat response cites 10 or more web sources, the +N overflow badge in the citations row wraps the second digit onto a new line.
The badge container in src/lib/components/chat/Messages/Citations.svelte was hard-sized at size-4 (16×16 px), which can't fit two-digit overflows at the text-[8px] font size used.
Reproduces on 0.9.2 and current main.
Fix
One CSS class change on Citations.svelte:188:
size-4 → min-w-4 h-4 px-1
Added whitespace-nowrap for safety
This keeps the perfect-circle look for single-digit overflows (visually consistent with the favicon row above) and lets the pill grow horizontally for multi-digit values.
Testing
Tested locally; the badge renders correctly for both single-digit and multi-digit overflow values. Pure CSS change, no JS or API impact.
🔄 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/24361
**Author:** [@Samrj12](https://github.com/Samrj12)
**Created:** 5/4/2026
**Status:** ❌ Closed
**Base:** `main` ← **Head:** `fix/source-overflow-badge-wrap`
---
### 📝 Commits (1)
- [`775073c`](https://github.com/open-webui/open-webui/commit/775073cb8f85c8d3cd7e2314063a853c3dfb369d) 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
## Bug
When a chat response cites 10 or more web sources, the `+N` overflow badge in the citations row wraps the second digit onto a new line.
The badge container in `src/lib/components/chat/Messages/Citations.svelte` was hard-sized at `size-4` (16×16 px), which can't fit two-digit overflows at the `text-[8px]` font size used.
Reproduces on `0.9.2` and current `main`.
## Fix
One CSS class change on `Citations.svelte:188`:
- `size-4` → `min-w-4 h-4 px-1`
- Added `whitespace-nowrap` for safety
This keeps the perfect-circle look for single-digit overflows (visually consistent with the favicon row above) and lets the pill grow horizontally for multi-digit values.
## Testing
Tested locally; the badge renders correctly for both single-digit and multi-digit overflow values. Pure CSS change, no JS or API impact.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/24361
Author: @Samrj12
Created: 5/4/2026
Status: ❌ Closed
Base:
main← Head:fix/source-overflow-badge-wrap📝 Commits (1)
775073cfix: 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
Bug
When a chat response cites 10 or more web sources, the
+Noverflow badge in the citations row wraps the second digit onto a new line.The badge container in
src/lib/components/chat/Messages/Citations.sveltewas hard-sized atsize-4(16×16 px), which can't fit two-digit overflows at thetext-[8px]font size used.Reproduces on
0.9.2and currentmain.Fix
One CSS class change on
Citations.svelte:188:size-4→min-w-4 h-4 px-1whitespace-nowrapfor safetyThis keeps the perfect-circle look for single-digit overflows (visually consistent with the favicon row above) and lets the pill grow horizontally for multi-digit values.
Testing
Tested locally; the badge renders correctly for both single-digit and multi-digit overflow values. Pure CSS change, no JS or API impact.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.