improve code

public/locales/en/common.json

@@ -41,7 +41,8 @@
         "body": "Cette page peut vous donner une idée du vécu d'une personne atteinte de dyslexie. La dyslexie est un trouble de la lecture qui touche entre 2.5% et 16% de la population. Si vous voulez faciliter la navigation pour vos utilisateurs, créer des composants très espacés, en faisant attention à la typographie que vous utilisez"
       }
     },
-    "ellipsis-reduce": "Reduce"
+    "ellipsis-reduce": "Reduce",
+    "ellipsis-expand": "Expand"
   },
   "product-category": {
     "fruit": "Fruit",

public/locales/fr/common.json

@@ -41,7 +41,8 @@
         "body": "Cette page peut vous donner une idée du vécu d'une personne atteinte de dyslexie. La dyslexie est un trouble de la lecture qui touche entre 2.5% et 16% de la population.Si vous voulez faciliter la navigation pour vos utilisateurs, créer des composants très espacés, en faisant attention à la typographie que vous utilisez."
       }
     },
-    "ellipsis-reduce": "Réduire"
+    "ellipsis-reduce": "Voir moins",
+    "ellipsis-expand": "Voir plus"
   },
   "product-category": {
     "fruit": "Fruit",

src/components/ui/Cards/HelpCard/HelpCard.tsx

@@ -6,26 +6,22 @@ interface IHelpCard {
   title: string;
   body: string;
   width?: string;
-  withEllipsis?: boolean;
+  withEllipsis: boolean;
 }
 
 interface IHelpCardsGroup {
   displayShoppingList?: boolean;
   disability: string;
 }
 
-const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
+const HelpCard = ({ title, body, width, withEllipsis = false }: IHelpCard) => {
   const { t } = useTranslation();
 
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(!withEllipsis);
   const paperRef = useRef<HTMLDivElement>(null);
 
   const handleExpansionChange = () => {
     setExpanded(!expanded);
-    if (!expanded && paperRef.current) {
-      // Scroll to the top when expanding
-      paperRef.current.scrollTo({ top: 0, behavior: "smooth" });
-    }
   };
 
   return (
@@ -47,7 +43,6 @@ const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
         style={{
           height: expanded ? "auto" : "100px",
           overflow: "hidden",
-          position: "relative",
         }}
         ref={paperRef}
       >
@@ -62,11 +57,17 @@ const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
         <Typography>{body}</Typography>
       </div>
       {withEllipsis && (
-        <Button onClick={handleExpansionChange}>
-          <Typography sx={{ fontWeight: "bold", color: "black" }}>
-            {expanded ? t("help-cards.ellipsis-reduce") : "..."}
-          </Typography>
-        </Button>
+        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Button onClick={handleExpansionChange} sx={{ padding: 0 }}>
+            <Typography
+              sx={{ fontWeight: "bold", color: "black", fontSize: "0.8em" }}
+            >
+              {expanded
+                ? t("help-cards.ellipsis-reduce")
+                : t("help-cards.ellipsis-expand")}
+            </Typography>
+          </Button>
+        </Box>
       )}
     </Paper>
   );