Fix button hiding when header title is too long (#6406)
This commit is contained in:
parent
3ed194b67d
commit
ffb2b8ef8c
2 changed files with 7 additions and 16 deletions
|
@ -133,9 +133,7 @@ export default class ColumnHeader extends React.PureComponent {
|
||||||
<h1 className={buttonClassName}>
|
<h1 className={buttonClassName}>
|
||||||
<button onClick={this.handleTitleClick}>
|
<button onClick={this.handleTitleClick}>
|
||||||
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
||||||
<span className='column-header__title'>
|
{title}
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className='column-header__buttons'>
|
<div className='column-header__buttons'>
|
||||||
|
|
|
@ -1913,7 +1913,7 @@
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
color: $ui-highlight-color;
|
color: $ui-highlight-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex: 0 0 auto;
|
white-space: nowrap;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 0 5px 0 0;
|
padding: 0 5px 0 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
@ -2403,15 +2403,16 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
& > button {
|
& > button {
|
||||||
display: flex;
|
|
||||||
flex: auto;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 15px;
|
padding: 15px 0 15px 15px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
@ -2432,7 +2433,7 @@
|
||||||
.column-header__buttons {
|
.column-header__buttons {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 0;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-header__links .text-btn {
|
.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 {
|
.text-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
Loading…
Reference in a new issue