fixed display of excessively long blog and post titles

apps/publish/src/css/custom.css

@@ -130,6 +130,10 @@ h4 {
   width: 688px;
 }
 
+.mw-336 {
+  max-width: 336px;
+}
+
 .mw-688 {
   max-width: 688px;
 }
@@ -228,7 +232,7 @@ h4 {
   background-color: #B1B2B3;
 }
 
-.title-preview {
+.two-lines {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   word-wrap: break-word;
@@ -236,10 +240,17 @@ h4 {
   overflow: hidden;
 }
 
-.body-preview {
+.five-lines {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   word-wrap: break-word;
   -webkit-line-clamp: 5;
   overflow: hidden;
 }
+
+.one-line {
+  word-wrap: break-word;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

apps/publish/src/js/components/blog.js

@@ -299,7 +299,9 @@ export class Blog extends Component {
           <div className="absolute w-100"
             style={{top:124, marginLeft: 16, marginRight: 16, marginTop: 32}}>
             <div className="flex-col">
-              <h2>{data.blogTitle}</h2>
+              <h2 style={{wordBreak: "break-word", marginRight:32}}>
+                {data.blogTitle}
+              </h2>
               <div className="flex" style={{marginTop: 22}}>
                 <div className="flex-col" style={{flexBasis: 160, marginRight:16}}>
                   <p className="gray-50 label-small-2 b">Host</p>

apps/publish/src/js/components/lib/path-control.js

@@ -71,7 +71,7 @@ export class PathControl extends Component {
 
       path.push(
         <Link to={seg.url} key={key++}
-          className="fl gray-30 label-regular" style={style}>
+          className="fl gray-30 label-regular one-line mw-336" style={style}>
           {seg.text}
         </Link>
       );

apps/publish/src/js/components/lib/post-snippet.js

@@ -16,7 +16,7 @@ export class PostSnippet extends Component {
       :  elem.c[0];
 
     return (
-      <p className="body-regular-400 body-preview"
+      <p className="body-regular-400 five-lines"
         style={{WebkitBoxOrient: "vertical"}}>
         {string}
       </p>

apps/publish/src/js/components/lib/recent-preview.js

@@ -57,7 +57,8 @@ export class RecentPreview extends Component {
             {comments}
           </p>
           <Link to={collLink}>
-            <p className="body-regular gray-50">
+            <p className="body-regular gray-50 one-line mw-336"
+              style={{WebkitBoxOrient: "vertical"}}>
               {this.props.post.collectionTitle}
             </p>
           </Link>

apps/publish/src/js/components/lib/title-snippet.js

@@ -8,7 +8,7 @@ export class TitleSnippet extends Component {
 
   render() {
     return (
-      <p className="body-large b title-preview"
+      <p className="body-large b two-lines"
         style={{WebkitBoxOrient: "vertical"}}>
         {this.props.title}
       </p>

apps/publish/src/js/components/post.js

@@ -410,7 +410,7 @@ export class Post extends Component {
           <div className="absolute w-100" style={{top:124}}>
             <div className="mw-688 center mt4 flex-col" style={{flexBasis: 688}}>
               <Link to={blogLink}>
-                <p className="body-regular">
+                <p className="body-regular one-line mw-688">
                   {blogLinkText}
                 </p>
               </Link>

apps/publish/src/js/components/pubs.js

@@ -58,9 +58,11 @@ export class Pubs extends Component {
       let cls = "w-100 flex " + bg;
       return (
         <div className={cls} key={i}>
-          <div className="fl body-regular-400" style={{flexBasis: 336}}>
+          <div className="fl body-regular-400 mw-336 w-336 pr3">
             <Link to={data.url}>
-               {data.title}
+              <p className="one-line mw-336">
+                {data.title}
+              </p>
             </Link>
           </div>
           <p className="fl body-regular-400" style={{flexBasis:336}}>

apps/publish/src/js/components/subs.js

@@ -108,9 +108,11 @@ export class Subs extends Component {
       if (data.type === 'regular') {
         return (
           <div className={cls} key={i}>
-            <div className="fl body-regular-400" style={{flexBasis: 336}}>
+            <div className="fl mw-336" style={{flexBasis: 336}}>
               <Link to={data.url}>
-                 {data.title}
+                <p className="body-regular-400 one-line pr3">
+                   {data.title}
+                </p>
               </Link>
             </div>
             <p className="fl body-regular-400" style={{flexBasis:336}}>
@@ -131,9 +133,13 @@ export class Subs extends Component {
           <div className={cls} key={i}>
             <div className="fl body-regular-400" style={{flexBasis: 336}}>
               <Link to={data.url}>
-                <span className="body-large green-medium"> • </span>
-                <span className="body-regular-400">Invite to</span>
-                <span className="body-regular">{data.title}</span>
+                <div className="mw-336 one-line pr3">
+                  <span className="body-large green-medium"> • </span>
+                  <span className="body-regular-400">Invite to</span>
+                  <span className="body-regular">
+                    {data.title}
+                  </span>
+                </div>
               </Link>
             </div>
             <p className="fl body-regular-400" style={{flexBasis:336}}>