Mobile layout & styling fixes and improvements for Payment details when payment is disputed

[brucealdridge]

Describe the bug

On the payments summary page with a dispute the mobile view needs some styling changes.

• When the pill for the payment - Disputed: Needs response - the label can sit outside the Card element.
• Padding consistency

Current View

Changes Required

• Make sure padding/margin is consistent to be 16PX in all boxes.
• Move the status pill to the very top positioned at the very top.
• Stack the buttons handled in Add Dispute Challenge and Accept buttons to Transaction Details #7093

RiEQmaKRI7u9USAI3lyZz0VX-fi-7430%3A30973

To Reproduce

1. On WooPayments 6.5 set the feature flag on update_option( '_wcpay_feature_dispute_on_transaction_page', '1' );
2. Create a disputed transaction using the card 4000000000000259 at checkout.
3. Find the dispute in Payments → Disputes and click it to view the dispute details screen on mobile.

Additional context

p1695089677913989-slack-C03LA109BKM

[zmaglica]

This issue impacts disputes, so assigning to team Helix. (based on team responsibilities Pc2DNy-3z-p2) @haszari Assigning as part of Gamma Triage process PcreKM-yM-p2.

[haszari]

As discussed with @nikkivias and team in slack, there's a bigger issue here which we might want to look at in future. This issue is to fix specific pain points with current design.

The "you have a dispute" notice illustrates the problem. It's nested three levels deep:

• Transaction detail box
  • Dispute detail box
    • Dispute needs response notice

And on mobile, that nesting makes for a very small box, and lots of margins!

[nikkivias]

Hi team, I've previously mentioned that there is not much room to compromise here as the dispute notice HAS to be contained and made separate from the rest of the details. The idea here is that the dispute details are akin to a yellow notice slapped onto a transaction. I think the bigger issue here is that the dispute details is so far down on mobile, but that is another problem, for maybe another team lol.

However I definitely recognize the marg-inception 🤓 situation here, I was wondering if the banner itself could be made to fill the entire container. Please see mockup

[haszari]

Removing projects, this is a bug that we can add to maintenance backlog.

[haszari]

Next steps:

• Review description, comments and UI and list essential styling tweaks/fixes.
• Implement the fixes!