Retour à la leçonMission
Mission : sortir CheckoutModal de sa prison à overflow:hidden
Corriger une modale rognée avec createPortal, tout en expliquant ce qui reste inchangé dans l'arbre React malgré le déplacement DOM.
Contexte
CheckoutModal.jsx est rendue directement à l'intérieur d'un conteneur .card (avec overflow: hidden; position: relative;) hérité d'un composant parent totalement indépendant du panier. Résultat : la moitié inférieure de la modale de paiement est invisible. Un #modale-root, frère de #root dans le HTML, existe déjà mais n'est pas utilisé. La modale a aussi besoin de lire ThemeContext fourni par un Provider situé au-dessus de .card, et elle doit se fermer au clic sur l'overlay SANS se fermer quand on clique à l'intérieur du contenu de paiement lui-même.