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>
This commit is contained in:
freshtemp-labs 2026-05-29 15:41:16 +08:00 committed by GitHub
parent 071db7ca1b
commit 593bf2f03c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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;