From 5893554a3ae376d0e00f80c3f56cdeaef50f4586 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 10 Jun 2026 14:03:47 +0200
Subject: [PATCH] [Glitch] Fix uncontained text overflow in column header

Port bff9f0eb6ddfec989a7f316dc7e9b0a7cc9b5086 to glitch-soc

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

diff --git a/app/javascript/flavours/glitch/components/column_header.tsx b/app/javascript/flavours/glitch/components/column_header.tsx
index 31fff6cd24..3e28458185 100644
--- a/app/javascript/flavours/glitch/components/column_header.tsx
+++ b/app/javascript/flavours/glitch/components/column_header.tsx
@@ -272,7 +272,7 @@ export const ColumnHeader: React.FC<Props> = ({
       {!backButton && hasIcon && (
         <Icon id={icon} icon={iconComponent} className='column-header__icon' />
       )}
-      {title}
+      <span className='column-header__text'>{title}</span>
     </>
   );
 
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index aa71df4a37..c1259f208c 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -4730,6 +4730,7 @@ a.status-card {
   &__title-wrapper {
     display: flex;
     flex-grow: 1;
+    min-width: 0;
   }
 
   &__title {
@@ -4745,9 +4746,7 @@ a.status-card {
     background: transparent;
     font: inherit;
     text-align: start;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    min-width: 0;
 
     &--with-back-button {
       padding-inline-start: 0;
@@ -4762,6 +4761,12 @@ a.status-card {
     }
   }
 
+  &__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   .column-header__back-button {
     flex: 1;
     color: var(--color-text-brand);