From 77f194c89eddb0f9794772368ec0fefbb3a772ce Mon Sep 17 00:00:00 2001
From: Lykke Axlin <lykkeaxlin@hotmail.com>
Date: Tue, 11 Jan 2022 16:25:06 +0100
Subject: [PATCH] add line break to prevent horizontal scrolling

Signed-off-by: Lykke Axlin <lykkeaxlin@hotmail.com>
---
 .../components/EditProjectDialog/EditProjectDialog.tsx |  9 ++++++++-
 .../EntityBazaarInfoContent.tsx                        | 10 ++++++----
 .../HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx  | 10 ++++++----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx
index 12b1a2dd7e..6c03810549 100644
--- a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx
+++ b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx
@@ -36,6 +36,11 @@ const useStyles = makeStyles({
     marginLeft: '0',
     marginRight: 'auto',
   },
+  wordBreak: {
+    wordBreak: 'break-all',
+    whiteSpace: 'normal',
+    margin: '-0.25rem 0',
+  },
 });
 
 export const EditProjectDialog = ({
@@ -101,7 +106,9 @@ export const EditProjectDialog = ({
         handleClose={handleDeleteClose}
         message={[
           'Are you sure you want to delete ',
-          <b key={bazaarProject.name}>{bazaarProject.name}</b>,
+          <b key={bazaarProject.name} className={classes.wordBreak}>
+            {bazaarProject.name}
+          </b>,
           ' from the Bazaar?',
         ]}
         type="delete"
diff --git a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx
index 9ad1763f6e..0c9da1ed24 100644
--- a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx
+++ b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx
@@ -38,7 +38,7 @@ import { CardContentFields } from '../CardContentFields';
 import { fetchProjectMembers } from '../../util/fetchMethods';
 
 const useStyles = makeStyles({
-  title: {
+  wordBreak: {
     wordBreak: 'break-all',
     whiteSpace: 'normal',
     margin: '-0.25rem 0',
@@ -169,9 +169,11 @@ export const EntityBazaarInfoContent = ({
             handleClose={handleUnlinkClose}
             message={[
               'Are you sure you want to unlink ',
-              <b>{parseEntityRef(bazaarProject.entityRef!).name}</b>,
+              <b className={classes.wordBreak}>
+                {parseEntityRef(bazaarProject.entityRef!).name}
+              </b>,
               ' from ',
-              <b>{bazaarProject.name}</b>,
+              <b className={classes.wordBreak}>{bazaarProject.name}</b>,
               ' ?',
             ]}
             type="unlink"
@@ -180,7 +182,7 @@ export const EntityBazaarInfoContent = ({
         )}
 
         <CardHeader
-          title={<p className={classes.title}>{bazaarProject?.name!}</p>}
+          title={<p className={classes.wordBreak}>{bazaarProject?.name!}</p>}
           action={
             <div>
               <IconButton
diff --git a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx
index d792be63b4..d9c1573182 100644
--- a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx
+++ b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx
@@ -66,7 +66,7 @@ import {
 import { parseBazaarResponse } from '../../util/parseMethods';
 
 const useStyles = makeStyles({
-  title: {
+  wordBreak: {
     wordBreak: 'break-all',
     whiteSpace: 'normal',
     margin: '-0.25rem 0',
@@ -237,9 +237,11 @@ export const HomePageBazaarInfoCard = ({
           handleClose={() => setOpenUnlink(false)}
           message={[
             'Are you sure you want to unlink ',
-            <b>{parseEntityRef(bazaarProject.value?.entityRef!).name}</b>,
+            <b className={classes.wordBreak}>
+              {parseEntityRef(bazaarProject.value?.entityRef!).name}
+            </b>,
             ' from ',
-            <b>{bazaarProject.value?.name}</b>,
+            <b className={classes.wordBreak}>{bazaarProject.value?.name}</b>,
             ' ?',
           ]}
           type="unlink"
@@ -258,7 +260,7 @@ export const HomePageBazaarInfoCard = ({
 
         <CardHeader
           title={
-            <p className={classes.title}>
+            <p className={classes.wordBreak}>
               {bazaarProject.value?.name || initProject.name}
             </p>
           }