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

diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index c300db89b9d88047c1e4a778ef1707216ffc33c0..6b79ec02daa092e7c5e1cbbed5f2b478aa160a68 100644 (file)
--- a/app/javascript/mastodon/components/column_header.js
+++ b/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>
+            {title}
           </button>
 
           <div className='column-header__buttons'>

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index bfca34f4d1cf418445c8350b88471997b4e0758d..2beb19afff097f2df4f0489d766d9aae193f30a4 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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;