From c6c495f8a868b1414076c3d49e151ec5b1888dfd Mon Sep 17 00:00:00 2001
From: Joshua Mbogo <55801923+mbogo-mit@users.noreply.github.com>
Date: Sun, 26 Nov 2023 06:52:32 -0500
Subject: [PATCH] fixing TileBadge styling

---
 src/components/CreateEditDocument/CreateEditDocument.js  | 8 ++++++++
 .../CreateEditDocument/CreateEditDocument.module.scss    | 2 ++
 src/components/DashboardChannels/IdeaSpaceTile.js        | 2 +-
 src/components/DashboardChannels/IdeaSpacesChannel.js    | 2 +-
 src/components/TileBadge/TileBadge.js                    | 9 +++++++--
 src/components/TileBadge/TileBadge.module.scss           | 1 +
 src/pages/documents/index.jsx                            | 4 +++-
 7 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/CreateEditDocument/CreateEditDocument.js b/src/components/CreateEditDocument/CreateEditDocument.js
index e343444a..ffc17d35 100644
--- a/src/components/CreateEditDocument/CreateEditDocument.js
+++ b/src/components/CreateEditDocument/CreateEditDocument.js
@@ -1602,9 +1602,13 @@ const CreateEditDocument = ({
                         key={gid}
                         text={groupsShared.core[gid]?.name}
                         fontSize={14}
+                        maxHeight={30}
+                        textLineHeight="14px"
+                        display="flex"
                         color="blue"
                         onDelete={() => deleteGroup(gid)}
                         marginRight={6}
+                        marginBottom={4}
                       />
                     ),
                   )}
@@ -1627,9 +1631,13 @@ const CreateEditDocument = ({
                         key={gid}
                         text={groupsShared.contributions[gid]?.name}
                         fontSize={14}
+                        maxHeight={30}
+                        textLineHeight="14px"
+                        display="flex"
                         color="blue"
                         onDelete={() => deleteGroup(gid)}
                         marginRight={6}
+                        marginBottom={4}
                       />
                     ),
                   )}
diff --git a/src/components/CreateEditDocument/CreateEditDocument.module.scss b/src/components/CreateEditDocument/CreateEditDocument.module.scss
index 44d58669..80c3b04a 100644
--- a/src/components/CreateEditDocument/CreateEditDocument.module.scss
+++ b/src/components/CreateEditDocument/CreateEditDocument.module.scss
@@ -210,6 +210,8 @@
   }
 
   .groupShareContainer {
+    display: flex;
+    flex-wrap: wrap;
     border-radius: 4px;
     border: 1px solid #CDCEDA;
     background-color: #f9f9f9;
diff --git a/src/components/DashboardChannels/IdeaSpaceTile.js b/src/components/DashboardChannels/IdeaSpaceTile.js
index 331fa923..36d9e3e0 100644
--- a/src/components/DashboardChannels/IdeaSpaceTile.js
+++ b/src/components/DashboardChannels/IdeaSpaceTile.js
@@ -137,7 +137,7 @@ export default function IdeaSpaceTile({
         <TileBadge
           key="existingAnnotationsText"
           color="red"
-          maxWidth={300}
+          maxTextWidth={300}
           text={existingText}
         />
       );
diff --git a/src/components/DashboardChannels/IdeaSpacesChannel.js b/src/components/DashboardChannels/IdeaSpacesChannel.js
index 0cffbee9..ebe5d4f8 100644
--- a/src/components/DashboardChannels/IdeaSpacesChannel.js
+++ b/src/components/DashboardChannels/IdeaSpacesChannel.js
@@ -212,7 +212,7 @@ export default function IdeaSpacesChannel({
         <TileBadge
           key="existingAnnotationsText"
           color="red"
-          maxWidth={300}
+          maxTextWidth={300}
           text={existingText}
         />
       );
diff --git a/src/components/TileBadge/TileBadge.js b/src/components/TileBadge/TileBadge.js
index a30c8b3a..8f0676fd 100644
--- a/src/components/TileBadge/TileBadge.js
+++ b/src/components/TileBadge/TileBadge.js
@@ -23,7 +23,10 @@ export default function TileBadge({
   marginLeft = 0,
   marginBottom = 0,
   marginRight = 0,
-  maxWidth = 200,
+  maxTextWidth = 200,
+  maxHeight,
+  textLineHeight,
+  display,
   href,
   fontSize = 10,
   icon,
@@ -94,12 +97,14 @@ export default function TileBadge({
           cursor: 'default',
           alignItems: 'center',
           justifyContent: 'center',
+          maxHeight,
+          display,
         }}
       >
         {icon}
         <span
           className={styles.tileBadgeText}
-          style={{ maxWidth }}
+          style={{ maxWidth: maxTextWidth, lineHeight: textLineHeight }}
         >
           {text}
         </span>
diff --git a/src/components/TileBadge/TileBadge.module.scss b/src/components/TileBadge/TileBadge.module.scss
index c0ec505b..4a1b4470 100644
--- a/src/components/TileBadge/TileBadge.module.scss
+++ b/src/components/TileBadge/TileBadge.module.scss
@@ -16,6 +16,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: inline-block;
 }
 
 .draggableTileBadge {
diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
index 0a782d7e..4a027a7d 100644
--- a/src/pages/documents/index.jsx
+++ b/src/pages/documents/index.jsx
@@ -166,6 +166,8 @@ const DocumentsIndex = ({
           key={`group-tile-badge-${id}`}
           color="grey"
           marginRight={5}
+          marginBottom={4}
+          maxHeight={25}
           text={groupNamesObj[id]}
         />
       ) : <></>
@@ -489,7 +491,7 @@ const DocumentsIndex = ({
                     },
                   },
                   { content: contributorsListToContributorsContent(contributors) || '-', style: { color: '#86919D' } },
-                  { content: groupsToTileBadges(groups) || '-', style: { color: '#86919D' } },
+                  { content: groupsToTileBadges(groups) || '-', style: { display: 'flex', flexWrap: 'wrap', color: '#86919D' } },
                   { content: state || '-', style: { color: '#86919D' } },
                   {
                     content: (createdAt && (