add line break to prevent horizontal scrolling

Signed-off-by: Lykke Axlin <lykkeaxlin@hotmail.com>

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"

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

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>
           }