diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -13,17 +13,22 @@
   display: flex;
   align-items: center;
   column-gap: 8px;
+  overflow: hidden;
 }
 
 div.threadColorSquare {
   width: 24px;
   height: 24px;
   border-radius: 4px;
+  flex: 0 0 auto;
 }
 
-p.threadTitle {
+.threadTitle {
   font-size: var(--m-font-16);
   font-weight: var(--bold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 button.topBarMenu {
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -34,7 +34,7 @@
           className={css.threadColorSquare}
           style={threadBackgroundColorStyle}
         />
-        <p className={css.threadTitle}>{uiName}</p>
+        <div className={css.threadTitle}>{uiName}</div>
       </div>
       {threadMenu}
     </div>