Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/composer: don't allow typing notifications to overflow

Browse source
This commit is contained in:
Tulir Asokan 2024-12-12 00:42:54 +02:00
parent ddd97655b0
commit f80df9a8f5
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/ui/composer/TypingNotifications.css
View file

@ -6,6 +6,7 @@ div.typing-notifications {
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
overflow: hidden;
> div.avatars { > div.avatars {
display: flex; display: flex;
@ -16,4 +17,11 @@ div.typing-notifications {
margin-left: -0.35rem; margin-left: -0.35rem;
} }
} }
> div.description {
text-wrap: nowrap;
/* TODO detect overflow and show "x users are typing" instead? */
overflow: hidden;
text-overflow: ellipsis;
}
} }

4
web/src/ui/composer/TypingNotifications.tsx
View file

@ -52,9 +52,9 @@ const TypingNotifications = () => {
let description: JSX.Element | null = null let description: JSX.Element | null = null
if (typing.length > 4) { if (typing.length > 4) {
description = <div>{typing.length} users are typing</div> description = <div className="description">{typing.length} users are typing</div>
} else if (typing.length > 0) { } else if (typing.length > 0) {
description = <div> description = <div className="description">
{humanJoinReact(memberNames)} {humanJoinReact(memberNames)}
{typing.length === 1 ? " is " : " are "} {typing.length === 1 ? " is " : " are "}
typing typing