fix: staged payment table content position

[adam-strzelec]

Description

Staged payment table UI fixes

Testing

• Make sure, you have installed Staged Payments extension
• Create staged payment
• Go through the entire Staged payment flow
• Compare table appearance for all cases

Diffs

New stuff ✨

Desktop:

Create action:

Performing action

Payment

Claim

Mobile:

Create action:

Performing action

Payment

Claim

Resolves #4112

[mmioana]

Hey @adam-strzelec really great start on tackling this issue! 🥇

On desktop the content remains in the same position

On mobile when creating a new Staged payment action

However on mobile once the action is created, you can see an empty column ❌

And once you get to the release stage the pills and Pay now buttons are misaligned ❌

You can find the designs here

Also @adam-strzelec please add in the testing steps that the Staged payments extension needs to be installed, as it might not be very clear.

[mmioana]

Hey @adam-strzelec thank you for your updates! I'll leave the issues I've spotted at the end of the review 😄

I've tested one staged payment with multiple milestones

Then I've tested with a single milestone

Issues

1. The issue I have spotted when having multiple milestones is before releasing the payments as the links on mobile are still misaligned for each milestone row ❌
   
   While in Figma
   

2. For a single milestone, on the Payment step there is an empty footer showing up on desktop
   

3. For a single milestone, on the Payment step on mobile the footer shows the total Creds amount but is misaligned. Also the same issue with the Pay now link not being aligned as previously mentioned
   

4. Also after releasing, there is an empty footer showing up on desktop
   

5. And on mobile, the footer has the Creds not aligned
   

[adam-strzelec]

@mmioana I haven't found a case for a single milestone in Figma, but I assume that when we have only one milestone, the footer shouldn't be displayed, just like it is when I create an action.

[mmioana]

@mmioana I haven't found a case for a single milestone in Figma, but I assume that when we have only one milestone, the footer shouldn't be displayed, just like it is when I create an action.

Hey @adam-strzelec. You're right, I couldn't find it in the design system either https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=1782-172609&t=640u5BCeqcHJKkDR-0
Maybe @melyndav can help with some information about whether we should show the footer or not if there is a single payment, though I would also assume in this case there is no need for a footer

[melyndav]

Hey guys @mmioana @adam-strzelec!

For single table rows on mobile for Staged Payments, we can leave out the footer. This keeps it consistent with the Advanced Payment. Thanks for checking!! 🌼🥳

[mmioana]

Hey @adam-strzelec this PR needs a rebase 👀

[adam-strzelec]

@mmioana done

[arrenv]

@adam-strzelec All looks great, thank you for the updates.

Mobile looking good:

Desktop looking good:

Resolved