From d556be2968641c265360297fd268a24119c68670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=8A=E3=82=93=E3=81=99=E3=81=8D?=
 <6533808+rinsuki@users.noreply.github.com>
Date: Thu, 26 Oct 2017 22:52:48 +0900
Subject: [PATCH] Fix column design broken with very long title (#5493)

* Fix #5314

* fix not beautiful code

* fix broken design with mobile view

* remove no longer needed code
---
 .../mastodon/components/column_header.js        |  4 +++-
 app/javascript/styles/mastodon/components.scss  | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index e4fa8fa7a7..80a8fbdb3a 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -137,7 +137,9 @@ export default class ColumnHeader extends React.PureComponent {
       <div className={wrapperClassName}>
         <h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
           <i className={`fa fa-fw fa-${icon} column-header__icon`} />
-          {title}
+          <span className='column-header__title'>
+            {title}
+          </span>
 
           <div className='column-header__buttons'>
             {backButton}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d7216cd1db..516f8de7d1 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2280,6 +2280,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .column-header {
+  display: flex;
   padding: 15px;
   font-size: 16px;
   background: lighten($ui-base-color, 4%);
@@ -2305,12 +2306,10 @@ button.icon-button.active i.fa-retweet {
 }
 
 .column-header__buttons {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  display: flex;
   height: 48px;
+  display: flex;
+  margin: -15px;
+  margin-left: 0;
 }
 
 .column-header__button {
@@ -2378,6 +2377,14 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.column-header__title {
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1;
+}
+
 .text-btn {
   display: inline-block;
   padding: 0;