From 00fdc5e1ceef5f7d2a1febf18a2dc981762f1fdf Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 8 Jun 2026 15:45:28 +0200
Subject: [PATCH] [Glitch] Fix broken column header layout after heading
 refactor

Port 1bfdfcae7b695811d021412d9d3abe6a833df7e9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/column_header.tsx    | 13 +++++++------
 .../flavours/glitch/styles/mastodon/components.scss | 11 ++++++-----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/column_header.tsx b/app/javascript/flavours/glitch/components/column_header.tsx
index cdbf6ef9dd..31fff6cd24 100644
--- a/app/javascript/flavours/glitch/components/column_header.tsx
+++ b/app/javascript/flavours/glitch/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}
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index 984ac33ffe..78c5cfd202 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -4728,14 +4728,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;
@@ -4748,6 +4749,10 @@ a.status-card {
     overflow: hidden;
     white-space: nowrap;
 
+    &--with-back-button {
+      padding-inline-start: 0;
+    }
+
     &:focus-visible {
       outline: var(--outline-focus-default);
     }
@@ -4757,10 +4762,6 @@ a.status-card {
     }
   }
 
-  .column-header__back-button + &__title {
-    padding-inline-start: 0;
-  }
-
   .column-header__back-button {
     flex: 1;
     color: var(--color-text-brand);