From 8ed9f754cf3ddedb1bfcb80b3068ef15b1332062 Mon Sep 17 00:00:00 2001
From: moonfunjohn <moonfunjohn@gmail.com>
Date: Fri, 31 Jul 2026 14:54:01 +0800
Subject: [PATCH] fix(payment): prevent method selector overflow

---
 .../payment/PaymentMethodSelector.vue         | 18 ++++++++-----
 .../__tests__/PaymentMethodSelector.spec.ts   | 26 +++++++++++++++++++
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/payment/PaymentMethodSelector.vue b/frontend/src/components/payment/PaymentMethodSelector.vue
index 2c02340ed4..25e99f06be 100644
--- a/frontend/src/components/payment/PaymentMethodSelector.vue
+++ b/frontend/src/components/payment/PaymentMethodSelector.vue
@@ -3,14 +3,18 @@
     <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
       {{ t('payment.paymentMethod') }}
     </label>
-    <div class="grid grid-cols-2 gap-3 sm:flex">
+    <div
+      data-testid="payment-method-grid"
+      class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4"
+    >
       <button
         v-for="method in sortedMethods"
         :key="method.type"
         type="button"
+        :title="methodLabel(method)"
         :disabled="!method.available"
         :class="[
-          'relative flex h-[60px] flex-col items-center justify-center rounded-lg border px-3 transition-all sm:flex-1',
+          'relative flex h-[60px] min-w-0 flex-col items-center justify-center rounded-lg border px-3 transition-all',
           !method.available
             ? 'cursor-not-allowed border-gray-200 bg-gray-50 opacity-50 dark:border-dark-700 dark:bg-dark-800/50'
             : selected === method.type
@@ -19,10 +23,12 @@
         ]"
         @click="method.available && emit('select', method.type)"
       >
-        <span class="flex items-center gap-2">
-          <img :src="methodIcon(method.type)" :alt="methodLabel(method)" class="h-7 w-7 object-contain" />
-          <span class="flex flex-col items-start leading-none">
-            <span class="text-base font-semibold">{{ methodLabel(method) }}</span>
+        <span class="flex w-full min-w-0 items-center justify-center gap-2">
+          <img :src="methodIcon(method.type)" :alt="methodLabel(method)" class="h-7 w-7 shrink-0 object-contain" />
+          <span class="flex min-w-0 flex-col items-start leading-none">
+            <span data-testid="payment-method-label" class="block w-full truncate text-base font-semibold">
+              {{ methodLabel(method) }}
+            </span>
             <span
               v-if="method.fee_rate > 0"
               class="text-[10px] tracking-wide text-gray-500 dark:text-dark-400"
diff --git a/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts b/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
index e481325fe7..5543ee8639 100644
--- a/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
+++ b/frontend/src/components/payment/__tests__/PaymentMethodSelector.spec.ts
@@ -9,6 +9,32 @@ vi.mock('vue-i18n', () => ({
 }))
 
 describe('PaymentMethodSelector', () => {
+  it('wraps large custom method collections without letting labels widen the selector', () => {
+    const methods = Array.from({ length: 12 }, (_, index) => ({
+      type: `custom_${index}`,
+      display_name: `CUSTOM_PAYMENT_METHOD_${index}`,
+      fee_rate: 0,
+      available: true,
+    }))
+
+    const wrapper = mount(PaymentMethodSelector, {
+      props: {
+        selected: 'custom_0',
+        methods,
+      },
+    })
+
+    const grid = wrapper.get('[data-testid="payment-method-grid"]')
+    expect(grid.classes()).toEqual(expect.arrayContaining(['grid', 'sm:grid-cols-3', 'lg:grid-cols-4']))
+    expect(grid.classes()).not.toContain('sm:flex')
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons).toHaveLength(methods.length)
+    expect(buttons.every(button => button.classes().includes('min-w-0'))).toBe(true)
+    expect(buttons.every((button, index) => button.attributes('title') === methods[index].display_name)).toBe(true)
+    expect(wrapper.findAll('[data-testid="payment-method-label"]').every(label => label.classes().includes('truncate'))).toBe(true)
+  })
+
   it('shows the configured display name for custom EasyPay methods', () => {
     const wrapper = mount(PaymentMethodSelector, {
       props: {