From 325992d08603d1c07f8d2b5bc580967a4e95f15c Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Wed, 17 Nov 2021 15:54:46 +0530
Subject: [PATCH] Fixed : #1221 UI: Versioning right panel should wrap the
 summary. (#1226)

---
 .../EntityVersionTimeLine.tsx                    |  2 +-
 .../ui/src/utils/EntityVersionUtils.tsx          | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/EntityVersionTimeLine/EntityVersionTimeLine.tsx b/catalog-rest-service/src/main/resources/ui/src/components/EntityVersionTimeLine/EntityVersionTimeLine.tsx
index 9107d134552..a55841fcf9f 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/EntityVersionTimeLine/EntityVersionTimeLine.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/EntityVersionTimeLine/EntityVersionTimeLine.tsx
@@ -55,7 +55,7 @@ const EntityVersionTimeLine: React.FC<Props> = ({
                 })}>
                 v{parseFloat(currV?.version).toFixed(1)}
               </p>
-              <div className="tw-text-xs tw-font-normal">
+              <div className="tw-text-xs tw-font-normal tw-break-all">
                 {getSummary(currV?.changeDescription)}
               </div>
               <p className="tw-text-xs tw-italic">
diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/EntityVersionUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
index 65459229481..e24db846ab5 100644
--- a/catalog-rest-service/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
@@ -166,9 +166,9 @@ export const summaryFormatter = (v: FieldChange) => {
       : '{}'
   );
   if (v.name === 'columns') {
-    return `columns ${value?.map((val: any) => val?.name).join(',')}`;
+    return `columns ${value?.map((val: any) => val?.name).join(', ')}`;
   } else if (v.name === 'tags' || v.name?.endsWith('tags')) {
-    return `tags ${value?.map((val: any) => val?.tagFQN)?.join(',')}`;
+    return `tags ${value?.map((val: any) => val?.tagFQN)?.join(', ')}`;
   } else {
     return v.name;
   }
@@ -182,13 +182,19 @@ export const getSummary = (changeDescription: ChangeDescription) => {
   return (
     <Fragment>
       {fieldsAdded?.length > 0 ? (
-        <p>{fieldsAdded?.map(summaryFormatter)} has been added</p>
+        <p className="tw-mb-2">
+          {fieldsAdded?.map(summaryFormatter)} has been added
+        </p>
       ) : null}
       {fieldsUpdated?.length ? (
-        <p>{fieldsUpdated?.map(summaryFormatter)} has been updated</p>
+        <p className="tw-mb-2">
+          {fieldsUpdated?.map(summaryFormatter)} has been updated
+        </p>
       ) : null}
       {fieldsDeleted?.length ? (
-        <p>{fieldsDeleted?.map(summaryFormatter)} has been deleted</p>
+        <p className="tw-mb-2">
+          {fieldsDeleted?.map(summaryFormatter)} has been deleted
+        </p>
       ) : null}
     </Fragment>
   );