design: Fixes poor line wrapping of long stream names using ellipses.

Earlier, on narrowing the window to some particular sizes,
long stream names used to overlap with the subscribe and view stream
buttons.
The issue was resolved by cutting the stream name short and putting
ellipses at the end. A title was provided to the stream name div so that
the entire stream name would be visible on hovering over it.

Fixes: #13139
This commit is contained in:
Vaibhav Raj Singh
2019-10-03 21:15:46 +05:30
committed by Tim Abbott
parent 3dc7d60ffe
commit 3dec7f6f6f
2 changed files with 7 additions and 4 deletions

View File

@@ -794,11 +794,15 @@ form#add_new_subscription {
.stream-name {
display: inline-block;
position: relative;
font-size: 1.5em;
font-weight: 600;
margin-left: -3px;
white-space: normal;
word-break: break-all;
padding-bottom: 5px;
white-space: nowrap;
width: 270px;
overflow: hidden;
text-overflow: ellipsis;
}
.deactivate,
@@ -844,7 +848,6 @@ form#add_new_subscription {
margin-right: 5px;
text-decoration: none;
line-height: 16px;
vertical-align: middle;
}
.editable-section {