Fix button hiding when header title is too long (#6406)

app/javascript/mastodon/components/column_header.js

@@ -133,9 +133,7 @@ export default class ColumnHeader extends React.PureComponent {
         <h1 className={buttonClassName}>
           <button onClick={this.handleTitleClick}>
             <i className={`fa fa-fw fa-${icon} column-header__icon`} />
-            <span className='column-header__title'>
             {title}
-            </span>
           </button>
 
           <div className='column-header__buttons'>

app/javascript/styles/mastodon/components.scss

@@ -1913,7 +1913,7 @@
   font-family: inherit;
   color: $ui-highlight-color;
   cursor: pointer;
-  flex: 0 0 auto;
+  white-space: nowrap;
   font-size: 16px;
   padding: 0 5px 0 0;
   z-index: 3;
@@ -2403,15 +2403,16 @@
   overflow: hidden;
 
   & > button {
-    display: flex;
-    flex: auto;
     margin: 0;
     border: none;
-    padding: 15px;
+    padding: 15px 0 15px 15px;
     color: inherit;
     background: transparent;
     font: inherit;
     text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   &.active {
@@ -2432,7 +2433,7 @@
 .column-header__buttons {
   height: 48px;
   display: flex;
-  margin-left: 0;
+  margin-left: auto;
 }
 
 .column-header__links .text-btn {
@@ -2512,14 +2513,6 @@
   }
 }
 
-.column-header__title {
-  display: inline-block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  flex: 1;
-}
-
 .text-btn {
   display: inline-block;
   padding: 0;