Merge pull request #2622 from asimsedhain/GH-2449

GH-2449 Limits gallery card and calendar title to 5 lines

webapp/src/components/calendar/fullcalendar.scss

@@ -204,9 +204,13 @@
     }
 
     .fc-event-title {
+        display: -webkit-box; // stylelint-disable-line
         font-size: 14px;
-        overflow: unset;
         white-space: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 5;
+        -webkit-box-orient: vertical; // stylelint-disable-line
     }
 
     .fc-day-sat,

webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap

@@ -18,7 +18,9 @@ exports[`src/components/gallery/GalleryCard with a comment content return Galler
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -164,7 +166,9 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -316,7 +320,9 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -346,7 +352,9 @@ exports[`src/components/gallery/GalleryCard with many contents return GalleryCar
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -496,7 +504,9 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -648,7 +658,9 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -687,7 +699,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -726,7 +740,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -765,7 +781,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -804,7 +822,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -950,7 +970,9 @@ exports[`src/components/gallery/GalleryCard without block content should match s
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>

webapp/src/components/gallery/galleryCard.scss

@@ -81,6 +81,14 @@
         .octo-icon {
             margin-right: 5px;
         }
+
+        .octo-titletext {
+            display: -webkit-box; // stylelint-disable-line
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical; // stylelint-disable-line
+        }
     }
 
     .gallery-props {

webapp/src/components/gallery/galleryCard.tsx

@@ -156,7 +156,10 @@ const GalleryCard = (props: Props) => {
             {props.visibleTitle &&
                 <div className='gallery-title'>
                     { card.fields.icon ? <div className='octo-icon'>{card.fields.icon}</div> : undefined }
-                    <div key='__title'>
+                    <div
+                        key='__title'
+                        className='octo-titletext'
+                    >
                         {card.title ||
                             <FormattedMessage
                                 id='KanbanCard.untitled'