fixing TileBadge styling

mitaai · Nov 26, 2023 · c6c495f · c6c495f
1 parent c9eea69
commit c6c495f
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 && (