Bug 1528447 - Long source domains should get truncated with ellipsis (#5041)

content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -42,9 +42,9 @@ export class DSCard extends React.PureComponent {
           </div>
           <div className="meta">
             <div className="info-wrap"
-              data-total-lines="6"
+              data-total-lines="7"
               ref={clampTotalLines}>
-              <p className="source">{this.props.source}</p>
+              <p className="source clamp" data-clamp="1">{this.props.source}</p>
               <header className="title clamp" data-clamp="4">{this.props.title}</header>
               {this.props.excerpt && <p className="excerpt clamp">{this.props.excerpt}</p>}
             </div>

content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx

@@ -78,12 +78,12 @@ export class Hero extends React.PureComponent {
             </div>
             <div className="meta">
               <div className="header-and-excerpt"
-                data-total-lines="6"
+                data-total-lines="7"
                 ref={clampTotalLines}>
                 {heroRec.context ? (
                   <p className="context">{heroRec.context}</p>
                 ) : (
-                  <p className="source">{heroRec.domain}</p>
+                  <p className="source clamp" data-clamp="1">{heroRec.domain}</p>
                 )}
                 <header className="clamp" data-clamp="4">{heroRec.title}</header>
                 <p className="excerpt clamp">{heroRec.excerpt}</p>

content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss

@@ -148,8 +148,6 @@ $card-header-in-hero-line-height: 20;
         font-size: 13px;
         color: $grey-50;
         margin-bottom: 0;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
       }
     }
   }

content-src/components/DiscoveryStreamComponents/List/List.jsx

@@ -56,7 +56,7 @@ export class ListItem extends React.PureComponent {
                   <br />
                 </span>
               )}
-              <span className="ds-list-item-info">{this.props.domain}</span>
+              <span className="ds-list-item-info clamp">{this.props.domain}</span>
             </p>
           </div>
           <DSImage extraClassNames="ds-list-image" source={this.props.image_src} rawSource={this.props.raw_image_src} />

content-src/components/DiscoveryStreamComponents/List/_List.scss

@@ -228,7 +228,7 @@ $item-line-height: 20;
 
     color: $grey-50;
     font-size: 13px;
-    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
   }
 
   .ds-list-item-title {

content-src/styles/_activity-stream.scss

@@ -139,6 +139,7 @@ input {
   -webkit-box-orient: vertical;
   display: -webkit-box;
   overflow: hidden;
+  word-break: break-word;
 }
 
 // Components