Openfoodnetwork: Overlap in the UI when inserting credit card details, in the backoffice

[filipefurtad0]

Description

When creating a new payment under /admin/orders/[order_nr]/payments and inserting payment details, there is an overlap of the fields in the "Card Details" section.

Expected Behavior

Fields should appear separated and readable.

Actual Behaviour

Fields overlap and making them hard to read.

Steps to Reproduce

1. Log in as admin and edit a given order, in the BO
2. Go to the payments section and create a new Stripe payment
3. Insert the credit card details and notice the overlapping numbers

Animated Gif/Screenshot

Workaround

-

Severity

bug-s4: it's annoying, but you can use it

Your Environment

• Version used: v3.5.8
• Browser name and version: Firefox/Chrome
• Operating System and version (desktop or mobile): Desktop Ubuntu 20.04

Possible Fix

[jibees]

I still have not tested with Stripe SCA (as I should have made some tweaks in my configuration), but I can see another display bug which is quite the same, under the section Credit Card:

[RachL]

@filipefurtad0 @jibees I'm wondering if fixing this issue: https://github.com/openfoodfoundation/openfoodnetwork/issues/2605 wouldn't solve the problem you've seen Filipe. @jibees yours deserves a separate issue I think aaaaand it's not something available on production I suspect those are the field made with the Bogus payment method. Which will be removed soon. If I'm right, no need to work on it.

[andrewpbrett]

Closed via https://github.com/openfoodfoundation/openfoodnetwork/pull/7476