From c54228e13c276d036c05ea59fe0a0d22b375ee00 Mon Sep 17 00:00:00 2001
From: asimsedhain <asimsedhain33@gmail.com>
Date: Wed, 23 Mar 2022 18:50:09 -0500
Subject: [PATCH] fix: gallary card and calendar title overflowing

---
 .../src/components/calendar/fullcalendar.scss |  6 ++-
 .../__snapshots__/galleryCard.test.tsx.snap   | 44 ++++++++++++++-----
 .../src/components/gallery/galleryCard.scss   |  8 ++++
 webapp/src/components/gallery/galleryCard.tsx |  5 ++-
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/calendar/fullcalendar.scss b/webapp/src/components/calendar/fullcalendar.scss
index c853e99d2..77cb797a4 100644
--- a/webapp/src/components/calendar/fullcalendar.scss
+++ b/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,
diff --git a/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap b/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
index aa94ef1e5..07e861e5f 100644
--- a/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
+++ b/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>
@@ -148,7 +150,9 @@ exports[`src/components/gallery/GalleryCard with a comment content should match
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -284,7 +288,9 @@ exports[`src/components/gallery/GalleryCard with an image content should match s
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -314,7 +320,9 @@ exports[`src/components/gallery/GalleryCard with many contents return GalleryCar
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -448,7 +456,9 @@ exports[`src/components/gallery/GalleryCard with many contents should match snap
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -584,7 +594,9 @@ exports[`src/components/gallery/GalleryCard with many images content should matc
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -623,7 +635,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -662,7 +676,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -701,7 +717,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -740,7 +758,9 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -870,7 +890,9 @@ exports[`src/components/gallery/GalleryCard without block content should match s
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
diff --git a/webapp/src/components/gallery/galleryCard.scss b/webapp/src/components/gallery/galleryCard.scss
index 84d4074f7..ee43b5d13 100644
--- a/webapp/src/components/gallery/galleryCard.scss
+++ b/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 {
diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx
index c35d8ead1..cb4bb3894 100644
--- a/webapp/src/components/gallery/galleryCard.tsx
+++ b/webapp/src/components/gallery/galleryCard.tsx
@@ -151,7 +151,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'