fix(Read More Button):only show when necessary

frontend/src/components/common/markdown/TruncatedMarkdown.jsx

@@ -10,11 +10,12 @@ function TruncatedMarkdown(props) {
   const [truncated, setTruncated] = useState(false);
   const { source, truncateFromLength, classes } = props;
   const sourceAsString = source === null ? "" : source;
-  const truncatable = sourceAsString.length > truncateFromLength;
+  const truncatable = sourceAsString.length > 3 * truncateFromLength;
 
   if (!truncatable) {
     return <Markdown source={sourceAsString} />;
   }
+
   return (
     <>
       <Collapse in={truncated} collapsedHeight="4rem">
@@ -22,9 +23,10 @@ function TruncatedMarkdown(props) {
       </Collapse>
       {!truncated && <div className={classes.gradientBorder} />}
       <Button
-        variant="contained"
+        variant="outlined"
         className={classes.moreButton}
         onClick={() => setTruncated(!truncated)}
+        size="small"
       >
         {!truncated ? "En lire plus..." : "En lire moins..."}
       </Button>