Mobile Improvements:
1. Modal footer buttons now stack vertically on mobile
- Order: Save Settings (primary) -> View in WooCommerce -> Cancel
- Full width buttons on mobile for easier tapping
- Responsive padding: px-4 on mobile, px-6 on desktop
2. Refresh button moved inline with title
- Added action prop to SettingsLayout
- Refresh button now appears next to Payments title
- Cleaner, more compact layout
Payment Categories Simplified:
3. Removed Payment Providers section
- PayPal, Stripe are also 3rd party, not different
- Confusing to separate providers from other gateways
- All non-manual gateways now in single category
4. Renamed to Online Payment Methods
- Was: Manual + Payment Providers + 3rd Party
- Now: Manual + Online Payment Methods
- Clearer distinction: offline vs online payments
5. Unified styling for all online gateways
- Same card style as manual methods
- Status badges (Enabled/Disabled)
- Requirements alerts
- Manage button always visible
Mobile UX:
- Footer buttons: flex-col on mobile, flex-row on desktop
- Proper button ordering with CSS order utilities
- Responsive spacing and padding
- Touch-friendly button sizes
Files Modified:
- Payments.tsx: Mobile footer + simplified categories
- SettingsLayout.tsx: Added action prop for header actions
Result:
✅ Better mobile experience
✅ Clearer payment method organization
✅ Consistent styling across all gateways
