Fix profile page accordion description text overflow (#2801)

* fix: add use memo missing dependencies * fix: prevent accordion desc text overflow
ita-social-projects · Nov 21, 2024 · 118a201 · 118a201
1 parent 8194cde
commit 118a201
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/accordion/Accordion.styles.ts b/src/components/accordion/Accordion.styles.ts
@@ -35,7 +35,8 @@ export const styles: AccordionSx = {
     description: {
       fontSize: { md: '14px', sm: '8px' },
       lineHeight: { md: '24px', sm: '12px' },
-      color: 'basic.white'
+      color: 'basic.white',
+      wordWrap: 'break-word'
     },
     active: {
       backgroundColor: 'primary.800',
@@ -66,7 +67,8 @@ export const styles: AccordionSx = {
       pb: '24px',
       color: 'primary.900',
       typography: 'body2',
-      fontWeight: 400
+      fontWeight: 400,
+      wordWrap: 'break-word'
     },
     active: {
       boxShadow: commonShadow,

diff --git a/src/containers/user-profile/about-user-block/AboutUserBlock.styles.tsx b/src/containers/user-profile/about-user-block/AboutUserBlock.styles.tsx
@@ -37,7 +37,8 @@ export const styles = {
       }
     },
     '& .MuiAccordionDetails-root': {
-      p: { md: '0 24px 24px', xs: '0 12px 12px' }
+      p: { md: '0 24px 24px', xs: '0 12px 12px' },
+      wordWrap: 'break-word'
     },
     '& .MuiAccordion-root': {
       transition: 'background-color 0.2s ease-in-out'

diff --git a/src/containers/user-profile/about-user-block/AboutUserBlock.tsx b/src/containers/user-profile/about-user-block/AboutUserBlock.tsx
@@ -41,7 +41,7 @@ const AboutUserBlock: FC<AboutUserBlockProps> = ({
           title: `userProfilePage.${userRole}About.${key}`,
           description: data[key]
         })),
-    [data]
+    [data, itemKeys, userRole]
   )
 
   if (accordionItems.length === 0) {