diff --git a/web/modals/threads/create/compose-subchannel-modal.css b/web/modals/threads/create/compose-subchannel-modal.css
--- a/web/modals/threads/create/compose-subchannel-modal.css
+++ b/web/modals/threads/create/compose-subchannel-modal.css
@@ -7,11 +7,14 @@
   align-items: center;
   justify-content: center;
   margin-top: 30px;
+  column-gap: 10px;
 }
 
 div.modalHeaderParentName {
   color: var(--compose-subchannel-mark-color);
-  display: inline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 div.container {
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -49,10 +49,8 @@
   const { parentThreadName } = props;
   return (
     <div className={css.modalHeader}>
-      <div>
-        {'within '}
-        <div className={css.modalHeaderParentName}>{parentThreadName}</div>
-      </div>
+      <div>{'within '}</div>
+      <div className={css.modalHeaderParentName}>{parentThreadName}</div>
     </div>
   );
 }
@@ -254,8 +252,8 @@
 
   return (
     <Modal name={modalName} onClose={onClose} size="fit-content">
-      <ComposeSubchannelHeader parentThreadName={parentThreadName} />
       <div className={css.container}>
+        <ComposeSubchannelHeader parentThreadName={parentThreadName} />
         <div className={css.stepItem}>
           <Stepper.Container
             className={css.stepContainer}