From 593bf2f03cc7f78767d43021b78d9d93afd5d7c0 Mon Sep 17 00:00:00 2001
From: freshtemp-labs <billbtbillb@gmail.com>
Date: Fri, 29 May 2026 15:41:16 +0800
Subject: [PATCH] fix(composer): ellipsis overflow for referenced filenames
 (#3269)

Inline @-mentioned filenames in the composer can be very lengthy,
causing line wrapping and visual crowding in the input area.

- Switch display from inline to inline-block for max-width
- Cap width at min(240px, 25vw)
- Apply overflow: hidden + text-overflow: ellipsis + white-space: nowrap
- Remove box-decoration-break (unused since content won't wrap)
- Tweak vertical-align for consistent inline-block alignment

Closes #3261

Co-authored-by: freshtemp-labs <freshtemp-labs@users.noreply.github.com>
---
 apps/web/src/styles/chat.css | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/styles/chat.css b/apps/web/src/styles/chat.css
index afce6cd8af..e216746fd6 100644
--- a/apps/web/src/styles/chat.css
+++ b/apps/web/src/styles/chat.css
@@ -537,26 +537,24 @@
   color: transparent;
 }
 .composer-inline-mention {
-  display: inline;
-  max-width: none;
+  display: inline-block;
+  max-width: min(240px, 25vw);
   margin: 0;
-  padding: 0;
+  padding: 0 1px;
   border: 0;
   border-radius: 5px;
   background: color-mix(in srgb, var(--accent) 8%, transparent);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
   color: color-mix(in srgb, var(--accent) 62%, var(--text));
   font: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   letter-spacing: inherit;
-  vertical-align: baseline;
-  overflow: visible;
-  text-overflow: clip;
-  white-space: inherit;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .composer-row {
   display: flex;