From 3dec7f6f6f4e58ee8391f0abe778e6faa732baab Mon Sep 17 00:00:00 2001
From: Vaibhav Raj Singh <vaibhavrajsingh2001@gmail.com>
Date: Thu, 3 Oct 2019 21:15:46 +0530
Subject: [PATCH] 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
---
 static/styles/subscriptions.scss           | 9 ++++++---
 static/templates/subscription_settings.hbs | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.scss
index 649517af08..443425130e 100644
--- a/static/styles/subscriptions.scss
+++ b/static/styles/subscriptions.scss
@@ -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 {
diff --git a/static/templates/subscription_settings.hbs b/static/templates/subscription_settings.hbs
index f560784b35..66a30948c9 100644
--- a/static/templates/subscription_settings.hbs
+++ b/static/templates/subscription_settings.hbs
@@ -15,7 +15,7 @@
             <div class="large-icon hash" style="color: {{color}}"></div>
             {{/if}}
             <div class="stream-name">
-                <span class="stream-name-editable editable-section">{{name}}</span>
+                <span title="{{name}}" class="stream-name-editable editable-section" >{{name}}</span>
                 {{#if can_change_name_description}}
                 <span class="editable" data-make-editable=".stream-name-editable"></span>
                 <span class="checkmark" data-finish-editing=".stream-name-editable">✓</span>