diff --git a/web/src/ui/composer/TypingNotifications.css b/web/src/ui/composer/TypingNotifications.css
index fca9c07..3fe717c 100644
--- a/web/src/ui/composer/TypingNotifications.css
+++ b/web/src/ui/composer/TypingNotifications.css
@@ -6,6 +6,7 @@ div.typing-notifications {
 	gap: 0.5rem;
 	align-items: center;
 	font-size: 0.9rem;
+	overflow: hidden;
 
 	> div.avatars {
 		display: flex;
@@ -16,4 +17,11 @@ div.typing-notifications {
 			margin-left: -0.35rem;
 		}
 	}
+
+	> div.description {
+		text-wrap: nowrap;
+		/* TODO detect overflow and show "x users are typing" instead? */
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 }
diff --git a/web/src/ui/composer/TypingNotifications.tsx b/web/src/ui/composer/TypingNotifications.tsx
index 545b3a9..e622021 100644
--- a/web/src/ui/composer/TypingNotifications.tsx
+++ b/web/src/ui/composer/TypingNotifications.tsx
@@ -52,9 +52,9 @@ const TypingNotifications = () => {
 
 	let description: JSX.Element | null = null
 	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) {
-		description = <div>
+		description = <div className="description">
 			{humanJoinReact(memberNames)}
 			{typing.length === 1 ? " is " : " are "}
 			typing