Merge pull request #19502 from mozilla/PAY-3280-payment-element-borders-cut-off

fix(payments-next): [Payments-Next Subscription] The Card section borders are cut off

Author: elizabeth-ilina

libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx

@@ -47,10 +47,15 @@ export function PaymentMethodManagement({
   const [isNonDefaultCardSelected, setIsNonDefaultCardSelected] =
     useState(false);
   const [isNonCardSelected, setIsNonCardSelected] = useState(false);
+  const [hideOverflow, setHideOverflow] = useState(true);
 
   const handleReady = () => {
     setIsReady(true);
   };
+  const handleElementReady = () => {
+    setIsReady(true);
+    setTimeout(() => setHideOverflow(false), 300);
+  };
 
   const handlePaymentElementChange = (
     event: StripePaymentElementChangeEvent
@@ -238,10 +243,11 @@ export function PaymentMethodManagement({
         )}
         <Form.Field name="payment">
           <Form.Control asChild>
-            <div className="relative overflow-hidden">
+            <div className={`relative ${hideOverflow ? 'overflow-hidden' : ''}`}>
               <PaymentElement
                 onChange={handlePaymentElementChange}
                 onLoaderStart={handleReady}
+                onReady={handleElementReady}
                 options={{
                   layout: {
                     type: 'accordion',