Added word break to prevent longer resposes to overflow the modal

Author: michal-gasiorek-wttech

cogboard-webapp/src/components/PopoverWithControls.js

@@ -56,17 +56,19 @@ export const PopoverWithControls = ({
               <StyledPopoverHeader>
                 {SERVICE_CHECK_RESPONSES.expected}
               </StyledPopoverHeader>
-              {expectedResponseBody}
+              <p>{expectedResponseBody}</p>
             </StyledPopoverText>
             <StyledPopoverText>
               <StyledPopoverHeader>
                 {SERVICE_CHECK_RESPONSES.received}
               </StyledPopoverHeader>
-              {body}
+              <p>{body}</p>
             </StyledPopoverText>
           </StyledPopoverTextWrapper>
         ) : (
-          <StyledPopoverText>{body}</StyledPopoverText>
+          <StyledPopoverText>
+            <p>{body}</p>
+          </StyledPopoverText>
         )}
       </Popover>
     </>

cogboard-webapp/src/components/styled/index.js

@@ -132,6 +132,10 @@ export const StyledPopoverText = styled.div`
   background: ${COLORS.WHITE};
   color: ${COLORS.BLACK};
   padding: 1rem;
+
+  p {
+    word-break: break-word;
+  }
 `;
 
 export const StyledPopoverHeader = styled(Typography)`