Fix broken column header layout after heading refactor (#39331)

app/javascript/mastodon/components/column_header.tsx

@@ -276,17 +276,20 @@ export const ColumnHeader: React.FC<Props> = ({
     </>
   );
 
+  const titleClassNames = classNames('column-header__title', {
+    'column-header__title--with-back-button': !!backButton,
+  });
+
   const component = (
     <div className={wrapperClassName}>
       <div className={headingClassName}>
+        {backButton}
         {hasTitle && (
           <h1 className='column-header__title-wrapper'>
-            {backButton}
-
             {onClick ? (
               <button
                 onClick={handleTitleClick}
-                className='column-header__title'
+                className={titleClassNames}
                 type='button'
                 id={getColumnSkipLinkId(columnIndex)}
               >
@@ -294,7 +297,7 @@ export const ColumnHeader: React.FC<Props> = ({
               </button>
             ) : (
               <span
-                className='column-header__title'
+                className={titleClassNames}
                 tabIndex={-1}
                 id={getColumnSkipLinkId(columnIndex)}
               >
@@ -304,8 +307,6 @@ export const ColumnHeader: React.FC<Props> = ({
           </h1>
         )}
 
-        {!hasTitle && backButton}
-
         <div className='column-header__buttons'>
           {extraButton}
           {collapseButton}

app/javascript/styles/mastodon/components.scss

@@ -4639,14 +4639,15 @@ a.status-card {
   outline: 0;
 
   &__title-wrapper {
+    display: flex;
     flex-grow: 1;
   }
 
   &__title {
     display: flex;
     align-items: center;
-    width: 100%;
     gap: 5px;
+    flex-grow: 1;
     margin: 0;
     border: 0;
     padding: 13px;
@@ -4659,6 +4660,10 @@ a.status-card {
     overflow: hidden;
     white-space: nowrap;
 
+    &--with-back-button {
+      padding-inline-start: 0;
+    }
+
     &:focus-visible {
       outline: var(--outline-focus-default);
     }
@@ -4668,10 +4673,6 @@ a.status-card {
     }
   }
 
-  .column-header__back-button + &__title {
-    padding-inline-start: 0;
-  }
-
   .column-header__back-button {
     flex: 1;
     color: var(--color-text-brand);