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

Because:

* The bottom border of the bottom payment method is cut off when users want to add a new card under "Manage payment methods."

This commit:

* Hides overflow while loading (to prevent bug [PAY-3236](https://mozilla-hub.atlassian.net/browse/PAY-3236) ) then does not hide overflow when Element is ready.

Closes #[PAY-3280](https://mozilla-hub.atlassian.net/browse/PAY-3280)

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
@@ -237,10 +242,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',