Merge pull request #386 from zendesk/afernandez/article-title

fix: ellipsis for very long titles

style.css

@@ -1422,6 +1422,8 @@ ul {
 }
 .recent-activity-item-link {
   font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .recent-activity-item-meta {
   color: $text_color;
@@ -1498,6 +1500,7 @@ ul {
 }
 .category-content {
   flex: 1;
+  max-width: 100%;
 }
 @media (min-width: 1024px) {
   .category-content {
@@ -1518,6 +1521,7 @@ ul {
 }
 .section-tree .section {
   flex: initial;
+  max-width: 100%;
 }
 @media (min-width: 768px) {
   .section-tree .section {
@@ -1540,6 +1544,8 @@ ul {
 .article-list-item {
   font-size: 16px;
   padding: 15px 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .article-list-item a {
   color: $text_color;
@@ -1557,6 +1563,7 @@ ul {
 }
 .section-content {
   flex: 1;
+  max-width: 100%;
 }
 @media (min-width: 1024px) {
   .section-content {
@@ -1639,6 +1646,11 @@ ul {
 .article-author {
   margin-bottom: 10px;
 }
+.article-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
 @media (min-width: 768px) {
   .article-title {
     flex-basis: 100%; /* Take entire row */
@@ -1811,6 +1823,7 @@ ul {
     border: 0;
     flex: 0 0 17%;
     height: auto;
+    max-width: 17%;
   }
 }
 .article-relatives {
@@ -1899,6 +1912,8 @@ ul {
   display: block;
   margin-top: 10px;
   margin-bottom: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .recent-articles li,

styles/_article.scss

@@ -47,6 +47,10 @@
   }
 
   &-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+
     @include tablet {
       flex-basis: 100%; /* Take entire row */
     }
@@ -115,6 +119,7 @@
       border: 0;
       flex: 0 0 17%;
       height: auto;
+      max-width: 17%;
     }
 
     border-bottom: 1px solid $low-contrast-border-color;
@@ -220,6 +225,8 @@
     display: block;
     margin-top: 10px;
     margin-bottom: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 

styles/_category.scss

@@ -11,6 +11,7 @@
     }
 
     flex: 1;
+    max-width: 100%;
   }
 }
 
@@ -24,6 +25,7 @@
   .section {
     @include tablet { flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */ }
     flex: initial;
+    max-width: 100%;
   }
 
   &-title {
@@ -44,6 +46,8 @@
   &-item {
     font-size: $font-size-bigger;
     padding: 15px 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     a { color: $text_color; }
   }

styles/_recent-activity.scss

@@ -37,6 +37,8 @@
 
   &-item-link {
     font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &-item-meta {

styles/_section.scss

@@ -10,6 +10,7 @@
       flex: 0 0 80%;
     }
     flex: 1;
+    max-width: 100%
   }
 
   &-subscribe button {