several fixes to payment applet styling & script

src/apps/dashboard/static/apps/dashboard/wallet.js

@@ -21,27 +21,7 @@ const initWallet = () => {
         saveBtn.hidden = false;
         cancelBtn.hidden = false;
         const section = addBtn.closest('section');
-        const rowPx = 3 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        section.style.setProperty('--applet-rows', '15');
-        const updateRows = () => {
-            const sectionTop = section.getBoundingClientRect().top;
-            let maxBottom = sectionTop;
-            for (const child of section.children) {
-                if (child.hidden) continue;
-                maxBottom = Math.max(maxBottom, child.getBoundingClientRect().bottom);
-            }
-            const padBot = parseFloat(getComputedStyle(section).paddingBottom);
-            const rows = Math.ceil((maxBottom - sectionTop + padBot) / rowPx) + 1;
-            section.style.setProperty('--applet-rows', String(rows));
-        };
-        paymentEl.on('ready', () => {
-            updateRows();
-            const stripeContainer = document.getElementById('id_stripe_payment_element');
-            if (stripeContainer) {
-                const obs = new ResizeObserver(updateRows);
-                obs.observe(stripeContainer);
-                section._stripeObs = obs;
-            }
-        });
     });
 
     saveBtn.addEventListener('click', async () => {
@@ -68,8 +48,7 @@ const initWallet = () => {
         saveBtn.hidden = true;
         cancelBtn.hidden = true;
         const section = cancelBtn.closest('section');
-        section.style.setProperty('--applet-rows', '2');
+        section.style.setProperty('--applet-rows', '3');
-        if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
     });
 
     cancelBtn.addEventListener('click', () => {
@@ -81,8 +60,7 @@ const initWallet = () => {
         saveBtn.hidden = true;
         cancelBtn.hidden = true;
         const section = cancelBtn.closest('section');
-        section.style.setProperty('--applet-rows', '2');
+        section.style.setProperty('--applet-rows', '3');
-        if (section._stripeObs) { section._stripeObs.disconnect(); section._stripeObs = null; }
     });
 };
 

src/apps/dashboard/tests/integrated/test_wallet_views.py

@@ -61,7 +61,7 @@ class WalletViewAppletContextTest(TestCase):
         )
         Applet.objects.get_or_create(
             slug="wallet-payment",
-            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
+            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 3, "context": "wallet"},
         )
         self.client.force_login(self.user)
 
@@ -96,7 +96,7 @@ class ToggleWalletAppletsTest(TestCase):
         )[0]
         Applet.objects.get_or_create(
             slug="wallet-payment",
-            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 2, "context": "wallet"},
+            defaults={"name": "Payment Methods", "grid_cols": 6, "grid_rows": 3, "context": "wallet"},
         )
         self.client.force_login(self.user)
 

src/functional_tests/test_wallet.py

@@ -12,7 +12,7 @@ class WalletDisplayTest(FunctionalTest):
         for slug, name, cols, rows in [
             ("wallet-balances", "Wallet Balances", 3, 3),
             ("wallet-tokens",   "Wallet Tokens",   3, 3),
-            ("wallet-payment",  "Payment Methods", 6, 2),
+            ("wallet-payment",  "Payment Methods", 6, 3),
         ]:
             Applet.objects.get_or_create(
                 slug=slug,
@@ -141,6 +141,44 @@ class WalletDisplayTest(FunctionalTest):
             )
         )
 
+    def test_user_can_cancel_adding_payment_method(self):
+        # 1. Log in, navigate to wallet page
+        self.create_pre_authenticated_session("capman@test.io")
+        self.browser.get(self.live_server_url + "/dashboard/wallet/")
+        # 2. Click Add Payment Method
+        self.wait_for_slow(
+            lambda: self.browser.find_element(By.ID, "id_add_payment_method")
+        ).click()
+        # 3. Wait for Cancel button to appear (visible after setup-intent fetch returns)
+        self.wait_for_slow(
+            lambda: self.assertFalse(
+                self.browser.find_element(By.ID, "id_cancel_payment_method").get_attribute("hidden")
+            )
+        )
+        # 3a. Assert applet expanded to 15 rows
+        rows = self.browser.execute_script(
+            "return document.getElementById('id_payment_methods')"
+            ".style.getPropertyValue('--applet-rows').trim()"
+        )
+        self.assertEqual(rows, '15')
+        # 4. Click Cancel
+        self.browser.find_element(By.ID, "id_cancel_payment_method").click()
+        # 5. Assert Cancel + Save buttons are hidden again
+        self.wait_for_slow(
+            lambda: self.assertTrue(
+                self.browser.find_element(By.ID, "id_cancel_payment_method").get_attribute("hidden")
+            )
+        )
+        self.assertTrue(
+            self.browser.find_element(By.ID, "id_save_payment_method").get_attribute("hidden")
+        )
+        # 6. Assert applet collapses back to 3 grid rows
+        rows = self.browser.execute_script(
+            "return document.getElementById('id_payment_methods')"
+            ".style.getPropertyValue('--applet-rows').trim()"
+        )
+        self.assertEqual(rows, '3')
+
     def test_user_can_purchase_tithe_token_bundle(self):
         # 1. Log in, navigate to wallet page
         self.create_pre_authenticated_session("capman@test.io")