fix: improve show less/more button at public profile biography (#486)

src/components/common/ShowLessAndMoreContent.tsx

@@ -0,0 +1,58 @@
+import { Interweave } from 'interweave';
+
+import React, { useState } from 'react';
+
+import { Box, Button } from '@mui/material';
+
+import { useLibraryTranslation } from '../../config/i18n';
+import LIBRARY from '../../langs/constants';
+
+interface Props {
+  content: string;
+  linesToShow?: number;
+  parseHtmlOnCollapse?: boolean;
+}
+const ShowLessAndMoreContent = ({
+  content,
+  linesToShow = 3,
+  parseHtmlOnCollapse = true,
+}: Props): JSX.Element => {
+  const { t } = useLibraryTranslation();
+
+  const [isContentCollapsed, setIsContentCollapsed] = useState(true);
+
+  const handleToggleButton = () => {
+    setIsContentCollapsed(!isContentCollapsed);
+  };
+
+  return (
+    <Box my={2} width="100%">
+      <Box
+        sx={{
+          display: '-webkit-box',
+          overflow: 'hidden',
+          WebkitLineClamp: isContentCollapsed ? linesToShow : 'unset',
+          WebkitBoxOrient: 'vertical',
+        }}
+      >
+        <Interweave
+          content={content}
+          noHtml={!parseHtmlOnCollapse && isContentCollapsed}
+        />
+      </Box>
+      {content?.length > 0 && (
+        <Button
+          sx={{ minWidth: 'max-content' }}
+          size="small"
+          onClick={handleToggleButton}
+        >
+          {isContentCollapsed
+            ? t(LIBRARY.SUMMARY_DESCRIPTION_SHOW_MORE)
+            : t(LIBRARY.SUMMARY_DESCRIPTION_SHOW_LESS)}
+        </Button>
+      )}
+    </Box>
+  );
+};
+
+export default ShowLessAndMoreContent;

src/components/member/BioSection.tsx

@@ -1,12 +1,12 @@
 import dynamic from 'next/dynamic';
 import { SocialLinks } from 'social-links';
 
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 
 import FacebookIcon from '@mui/icons-material/Facebook';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/Twitter';
-import { Box, Button, Link, Stack, Typography, styled } from '@mui/material';
+import { Box, Link, Stack, Typography, styled } from '@mui/material';
 
 import { Member, ThumbnailSize } from '@graasp/sdk';
 
@@ -15,8 +15,8 @@ import { useLibraryTranslation } from '../../config/i18n';
 import { publicProfileAccountPath } from '../../config/paths';
 import LIBRARY from '../../langs/constants';
 import { QueryClientContext } from '../QueryClientContext';
-import ContentDescription from '../collection/ContentDescription';
 import BackButton from '../common/BackButton';
+import ShowLessAndMoreContent from '../common/ShowLessAndMoreContent';
 
 const Avatar = dynamic(() => import('@graasp/ui').then((mod) => mod.Avatar), {
   ssr: false,
@@ -36,6 +36,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
   alignItems: 'start',
   padding: theme.spacing(3),
   marginBottom: theme.spacing(3),
+  width: '100%',
   [theme.breakpoints.down('sm')]: {
     flexWrap: 'wrap',
     justifyContent: 'center',
@@ -44,7 +45,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
 
 const BioSection = ({ id, memberData, isOwnProfile }: Props) => {
   const { t } = useLibraryTranslation();
-  const [collapsedDescription, setCollapsedDescription] = useState(true);
+
   const { hooks } = useContext(QueryClientContext);
   const { data: publicProfile } = hooks.usePublicProfile(id || '');
 
@@ -53,16 +54,14 @@ const BioSection = ({ id, memberData, isOwnProfile }: Props) => {
       id,
       size: ThumbnailSize.Small,
     });
-  const handleShowMoreButton = () => {
-    setCollapsedDescription(!collapsedDescription);
-  };
 
   return (
     <Stack
       maxWidth="lg"
       alignItems="flex-start"
       justifyItems="flex-start"
       marginTop={2}
+      width="100%"
     >
       <BackButton />
 
@@ -81,11 +80,12 @@ const BioSection = ({ id, memberData, isOwnProfile }: Props) => {
           isLoading={isLoadingAuthorAvatar}
           component="avatar"
         />
-        <Box>
+        <Box width="100%">
           <Box
             display="flex"
             alignItems="center"
             justifyContent="space-between"
+            flex={2}
           >
             <Box display="flex" alignItems="center" gap={2}>
               <Typography variant="h3" textTransform="capitalize">
@@ -96,25 +96,7 @@ const BioSection = ({ id, memberData, isOwnProfile }: Props) => {
               <Link href={publicProfileAccountPath}>{t(LIBRARY.EDIT)}</Link>
             )}
           </Box>
-
-          <Box my={2}>
-            <ContentDescription
-              content={publicProfile?.bio}
-              collapsed={collapsedDescription}
-              numberOfLinesToShow={3}
-            />
-
-            <Button
-              sx={{ minWidth: 'max-content' }}
-              size="small"
-              onClick={handleShowMoreButton}
-            >
-              {collapsedDescription
-                ? t(LIBRARY.SUMMARY_DESCRIPTION_SHOW_MORE)
-                : t(LIBRARY.SUMMARY_DESCRIPTION_SHOW_LESS)}
-            </Button>
-          </Box>
-
+          <ShowLessAndMoreContent content={publicProfile?.bio} />
           {(publicProfile?.facebookID ||
             publicProfile?.linkedinID ||
             publicProfile?.twitterID) && (