Break long words on (Manage)ListingCards

src/components/ListingCard/ListingCard.js

@@ -11,6 +11,8 @@ import config from '../../config';
 
 import css from './ListingCard.css';
 
+const MAX_LENGTH_FOR_WORDS_IN_TITLE = 10;
+
 const priceData = (price, intl) => {
   if (price && price.currency === config.currency) {
     const formattedPrice = formatMoney(intl, price);
@@ -30,6 +32,23 @@ const priceData = (price, intl) => {
   return {};
 };
 
+// Cards are not fixed sizes - So, long words in title make flexboxed items to grow too big.
+// 1. We split title to an array of words and spaces.
+//    "foo bar".split(/([^\s]+)/gi) => ["", "foo", " ", "bar", ""]
+// 2. Then we break long words by adding a '<span>' with word-break: 'break-all';
+const formatTitle = (title, maxLength) => {
+  const nonWhiteSpaceSequence = /([^\s]+)/gi;
+  return title.split(nonWhiteSpaceSequence).map((word, index) => {
+    return word.length > maxLength ? (
+      <span key={index} style={{ wordBreak: 'break-all' }}>
+        {word}
+      </span>
+    ) : (
+      word
+    );
+  });
+};
+
 export const ListingCardComponent = props => {
   const { className, rootClassName, intl, listing } = props;
   const classes = classNames(rootClassName || css.root, className);
@@ -69,7 +88,7 @@ export const ListingCardComponent = props => {
           </div>
         </div>
         <div className={css.mainInfo}>
-          <div className={css.title}>{title}</div>
+          <div className={css.title}>{formatTitle(title, MAX_LENGTH_FOR_WORDS_IN_TITLE)}</div>
           <div className={css.authorInfo}>
             <FormattedMessage
               className={css.authorName}

src/components/ListingCard/__snapshots__/ListingCard.test.js.snap

@@ -51,7 +51,9 @@ exports[`ListingCard matches snapshot 1`] = `
     </div>
     <div>
       <div>
-        listing1 title
+        listing1
+         
+        title
       </div>
       <div>
         <FormattedMessage

src/components/ManageListingCard/ManageListingCard.js

@@ -27,6 +27,7 @@ import css from './ManageListingCard.css';
 
 // Menu content needs the same padding
 const MENU_CONTENT_OFFSET = -12;
+const MAX_LENGTH_FOR_WORDS_IN_TITLE = 7;
 
 const priceData = (price, intl) => {
   if (price && price.currency === config.currency) {
@@ -55,6 +56,23 @@ const createURL = (routes, listing) => {
   return createResourceLocatorString('EditListingPage', routes, pathParams, {});
 };
 
+// Cards are not fixed sizes - So, long words in title make flexboxed items to grow too big.
+// 1. We split title to an array of words and spaces.
+//    "foo bar".split(/([^\s]+)/gi) => ["", "foo", " ", "bar", ""]
+// 2. Then we break long words by adding a '<span>' with word-break: 'break-all';
+const formatTitle = (title, maxLength) => {
+  const nonWhiteSpaceSequence = /([^\s]+)/gi;
+  return title.split(nonWhiteSpaceSequence).map((word, index) => {
+    return word.length > maxLength ? (
+      <span key={index} style={{ wordBreak: 'break-all' }}>
+        {word}
+      </span>
+    ) : (
+      word
+    );
+  });
+};
+
 export const ManageListingCardComponent = props => {
   const {
     className,
@@ -250,7 +268,7 @@ export const ManageListingCardComponent = props => {
           </div>
         </div>
         <div className={css.mainInfo}>
-          <div className={titleClasses}>{title}</div>
+          <div className={titleClasses}>{formatTitle(title, MAX_LENGTH_FOR_WORDS_IN_TITLE)}</div>
         </div>
         <button
           className={css.edit}

src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap

@@ -135,7 +135,17 @@ exports[`ManageListingCard matches snapshot 1`] = `
       <div
         className=""
       >
-        listing1 title
+        <span
+          style={
+            Object {
+              "wordBreak": "break-all",
+            }
+          }
+        >
+          listing1
+        </span>
+         
+        title
       </div>
     </div>
     <button