Merge pull request internetarchive#11080 from krishnaGauss/11037/fix/global-list-render

Fix title overflows in new list cards

Author: mekarpeles

openlibrary/templates/lists/list_follow.html

@@ -10,7 +10,7 @@
     $ count = cached_info["count"]
     <div class="list-follow-card">
         <a class="list-follow-card__header" href="$list.get_url()">
-             <div class="list-follow-card__title">$cached_info["title"]</div>
+                <div class="list-follow-card__title" title="${cached_info['title']}">$cached_info['title']</div>
              <div class="list-follow-card__num-books">
                  $ungettext("%(count)d book", "%(count)d books", count, count=count)
              </div>

static/css/components/list-follow.less

@@ -47,6 +47,7 @@
     align-items: center;
     padding: 7px 10px;
     border-radius: 0 0 4px 4px;
+    width: 100%;
     a& {
       text-decoration: none;
     }
@@ -130,10 +131,18 @@
     font-weight: bold;
     font-size: @font-size-label-large;
     color: @black;
-
-    white-space: nowrap;
+    width: 100%;
+    max-height: 2.8em;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1.4em;
+    white-space: normal;
+    word-break: break-word;
+    position: relative;
+    text-align: center;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 
   &__bottom-community {