J'utilise Amplify UI dans la bibliothèque React et je crée une carte qui affiche l'utilisateur et certaines de ses informations. Cependant, s’ils ont trop d’informations, le débordement est coupé et peut être vu sur une autre page. Tout semble bien, sauf pour les Macbooks de certains utilisateurs. Je suis confus car je n'ai pas eu ce problème même avec mon Iphone.

La carte utilisateur devrait ressembler à ceci :

Mais sur les MacBook de certaines personnes, cela finit par ressembler à ceci :

Veuillez ignorer la marque rouge des informations personnelles.

Voici comment j'appelle Amplify sur le composant généré à partir du code Figma :

Bio: {
                    overflow: "fade",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "80px",
                    fontSize: { base: ".875rem", medium: ".875rem" },
                  },
                  Subjects: {
                    alignItems: "flex-start",
                    overflow: "clip",
                    style: {
                      WebkitOverflowScrolling: "touch", // for webit browsers to prevent stacked letters
                      whiteSpace: "nowrap",
                    },
                    maxHeight: "60px",
                    wrap: "wrap",
                    gap: "xs",
                    alignContent: "flex-start",
                  },

Voici l'extrait de code du composant généré par Amplify :

<Flex
          gap="4px"
          direction="row"
          width="unset"
          height="unset"
          justifyContent="flex-start"
          alignItems="center"
          shrink="0"
          position="relative"
          padding="0px 0px 0px 0px"
          children={subjects}
          {...getOverrideProps(overrides, "Subjects")}
        ></Flex>
...
<Text
          fontFamily="Inter"
          fontSize="16px"
          fontWeight="400"
          color="rgba(48,64,80,1)"
          lineHeight="24px"
          textAlign="left"
          display="block"
          direction="column"
          justifyContent="unset"
          width="unset"
          height="unset"
          gap="unset"
          alignItems="unset"
          shrink="0"
          alignSelf="stretch"
          position="relative"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          isTruncated={true}
          children={tutor?.bio}
          {...getOverrideProps(overrides, "Bio")}
        ></Text>

Puis-je ajouter autre chose à ces conteneurs pour que MacBook Safari affiche désormais des informations empilées ?