Added word break to prevent longer resposes to overflow the modal

wttech · Sep 14, 2021 · 0a73ed7 · 0a73ed7
1 parent 9873110
commit 0a73ed7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/cogboard-webapp/src/components/PopoverWithControls.js b/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>
     </>

diff --git a/cogboard-webapp/src/components/styled/index.js b/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)`