diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
index 9238746cc..faaafca44 100644
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -1,34 +1,39 @@
 div.topBarContainer {
   display: flex;
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   color: var(--thread-top-bar-color);
   border-bottom: 1px solid var(--border);
 }
 
 div.topBarThreadInfo {
   height: 24px;
   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 {
   background-color: transparent;
   border: none;
   cursor: pointer;
   color: var(--thread-top-bar-menu-color);
 }
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
index a3c6e850e..326afa82b 100644
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -1,44 +1,44 @@
 // @flow
 
 import * as React from 'react';
 
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
 };
 function ThreadTopBar(props: ThreadTopBarProps): React.Node {
   const { threadInfo } = props;
   const threadBackgroundColorStyle = React.useMemo(
     () => ({
       background: `#${threadInfo.color}`,
     }),
     [threadInfo.color],
   );
 
   let threadMenu = null;
   if (!threadIsPending(threadInfo.id)) {
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   return (
     <div className={css.topBarContainer}>
       <div className={css.topBarThreadInfo}>
         <div
           className={css.threadColorSquare}
           style={threadBackgroundColorStyle}
         />
-        <p className={css.threadTitle}>{uiName}</p>
+        <div className={css.threadTitle}>{uiName}</div>
       </div>
       {threadMenu}
     </div>
   );
 }
 
 export default ThreadTopBar;