diff --git a/web/chat/chat-thread-ancestors.css b/web/chat/chat-thread-ancestors.css
--- a/web/chat/chat-thread-ancestors.css
+++ b/web/chat/chat-thread-ancestors.css
@@ -3,11 +3,11 @@
   display: flex;
   align-items: center;
   column-gap: 5px;
+  flex: 0 0.75 auto;
+  overflow: hidden;
 }
 
 div.ancestorName {
-  display: flex;
-  align-items: center;
   padding: 2px 6px;
   border-radius: 2px;
   box-sizing: border-box;
@@ -23,16 +23,13 @@
 div.ancestorKeyserver {
   display: flex;
   align-items: center;
+  flex: 0 1 auto;
 }
 
 div.ancestorKeyserverName {
   border-radius: 0 2px 2px 0;
 }
 
-svg.ancestorSeparator {
-  color: var(--thread-ancestor-separator-color);
-}
-
 div.ancestorKeyserverOperator {
   display: flex;
   column-gap: 5px;
@@ -44,6 +41,24 @@
   box-sizing: border-box;
 }
 
+div.middle {
+  flex: 0 0 auto;
+}
+
+div.currentThreadName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+svg.ancestorSeparator {
+  color: var(--thread-ancestor-separator-color);
+  flex: 0 0 auto;
+}
+
 button.seeFullAncestor {
   font-size: var(--xs-font-12);
   font-weight: var(--semi-bold);
diff --git a/web/chat/chat-thread-ancestors.react.js b/web/chat/chat-thread-ancestors.react.js
--- a/web/chat/chat-thread-ancestors.react.js
+++ b/web/chat/chat-thread-ancestors.react.js
@@ -74,7 +74,10 @@
           icon="chevron-right"
           size={12}
         />
-        <div style={threadColorStyle} className={css.ancestorName}>
+        <div
+          style={threadColorStyle}
+          className={classNames(css.ancestorName, css.middle)}
+        >
           &hellip;
         </div>
       </>
@@ -94,7 +97,10 @@
           icon="chevron-right"
           size={12}
         />
-        <div style={threadColorStyle} className={css.ancestorName}>
+        <div
+          style={threadColorStyle}
+          className={classNames(css.ancestorName, css.currentThreadName)}
+        >
           {threadInfo.uiName}
         </div>
       </>
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
@@ -11,19 +11,27 @@
 div.topBarThreadInfo {
   height: 24px;
   display: flex;
+  justify-content: flex-start;
   align-items: center;
   column-gap: 8px;
+  overflow: hidden;
+  flex: 1;
 }
 
 div.threadColorSquare {
   width: 24px;
   height: 24px;
   border-radius: 4px;
+  flex: 0 0 auto;
 }
 
-p.threadTitle {
+div.threadTitle {
   font-size: var(--m-font-16);
   font-weight: var(--bold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 0 1 auto;
 }
 
 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
@@ -33,7 +33,7 @@
           className={css.threadColorSquare}
           style={threadBackgroundColorStyle}
         />
-        <p className={css.threadTitle}>{threadInfo.uiName}</p>
+        <div className={css.threadTitle}>{threadInfo.uiName}</div>
         <ThreadAncestors threadInfo={threadInfo} />
       </div>
       {threadMenu}
diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -1,4 +1,5 @@
 button.menuButton {
+  flex: 0 0 auto;
   background-color: transparent;
   border: none;
   cursor: pointer;