[CAI-240] Fix out of bound text for long words (#1218)

* fix long words exiting the screen * add changeset
pagopa · Oct 31, 2024 · d5d09b6 · d5d09b6
1 parent acae444
commit d5d09b6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/smart-chicken-kick.md b/.changeset/smart-chicken-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix chat messages with long words from going off the screen
diff --git a/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx b/apps/nextjs-website/src/components/atoms/ChatHistoryMessage/ChatHistoryMessage.tsx
@@ -71,7 +71,10 @@ const ChatHistoryMessage = ({
           component='span'
           minWidth='12rem'
           fontWeight={600}
-          sx={{ fontSize: { xs: '1rem', xl: '1.125rem' } }}
+          sx={{
+            fontSize: { xs: '1rem', xl: '1.125rem' },
+            overflowWrap: 'break-word',
+          }}
         >
           {sender}
         </Typography>
@@ -92,7 +95,10 @@ const ChatHistoryMessage = ({
         marginLeft={'1rem'}
         paragraph
         width={'100%'}
-        sx={{ fontSize: { xs: '0.875rem', xl: '1rem' } }}
+        sx={{
+          fontSize: { xs: '0.875rem', xl: '1rem' },
+          overflowWrap: 'break-word',
+        }}
       >
         {parsedChatMessage}
       </Typography>

diff --git a/...ebsite/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx b/...ebsite/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
@@ -103,7 +103,9 @@ const ChatbotHistoryDetailLayout = ({
           </Button>
         </DialogActions>
       </Dialog>
-      <Typography variant='h4'>{firstQuery.question}</Typography>
+      <Typography variant='h4' sx={{ overflowWrap: 'break-word' }}>
+        {firstQuery.question}
+      </Typography>
       <Stack direction='row' justifyContent='space-between'>
         <Typography
           component='span'