Fix text overflow in lightbox.

This fixes the user’s name to not fall on the next line. Instead it
appears on the same line and overflows properly into an ellipsis so it
theoretically should never overflow on to the next line.

static/styles/overlay.css

@@ -125,16 +125,23 @@
 
 #overlay .image-description {
     /* approx width of screen minus action buttons on the side. */
-    width: calc(100% - 320px);
+    width: calc(100% - 260px);
+    /* add some extra margin top and remove some bottom to keep the
+       height the same. and vertically center the text with the buttons. */
+    margin-top: 25px;
+    margin-bottom: 15px;
 
     font-size: 1.3rem;
     color: #fff;
 }
 
 #overlay .image-description .title {
+    display: inline-block;
+    vertical-align: top;
+
     font-weight: 500;
     line-height: normal;
-    max-width: calc(100%);
+    max-width: calc(100% - 210px);
 
     /* Required for text-overflow */
     white-space: nowrap;
@@ -142,6 +149,11 @@
     text-overflow: ellipsis;
 }
 
+#overlay .image-description .user::before {
+    margin-right: 5px;
+    content: "–";
+}
+
 #overlay .player-container {
     height: calc(100vh - 71px);
     display: flex;
@@ -157,7 +169,14 @@
 }
 
 #overlay .image-description .user {
+    max-width: 200px;
+    display: inline-block;
+    vertical-align: top;
     font-weight: 300;
+    line-height: normal;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: pre;
 }
 
 .image-actions .button {
@@ -198,4 +217,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    #overlay .image-description .title {
+        max-width: calc(100% - 60px);
+    }
 }

templates/zerver/image-overlay.html

@@ -2,8 +2,7 @@
   <div class="image-info-wrapper">
     <div class="image-description">
       <div class="title"></div>
-      &mdash;
-      <span class="user"></span>
+      <div class="user"></div>
     </div>
     <div class="exit">x</div>
     <div class="image-actions">