Fix: Findings regarding table refactoring

[mmioana]

Description

• There were the following findings while testing Fix: Issues with actions table pagination and refactor table component #3935 described here

Testing

TODO: Let's test these issues are fixed.

Note

Make sure to start a fresh environment using node scripts/create-data.js --timeout 100 --coloniesCount 12

Manage tokens

• Step 1. Create a Manage tokens action
• Step 2. Copy the token addresses from the other colonies and add them to the table until there are more than 10
• Step 3. Check the padding bottom is not shown for mobile/tablet/desktop

Split payment

• Step 1. Create a Split payment action
  

• Step 2. Add more than 10 recipients

• Step 3. Check pagination is not shown
  

• Step 4. Switch to a mobile/tablet view

• Step 5. Check Percent is shown for each row

• Step 6. Check the footer amount and percent are right-aligned and have a right padding
  

• Step 7. Complete the action and check steps 3-6
  
  

Edit colony

• Step 1. Create a Edit colony details action
• Step 2. Switch to a mobile/tablet view
• Step 3. Scroll to the social links table and check the last item has a rounded left-bottom border
  

Resolves #4046

[iamsamgibbs]

Nice work fixing up these tables, this all looks good!

I've noticed one issue with the manage tokens table when on mobile view. Seems to only happen when you have 9 or more tokens selected.

Everything else looks good though!

[mmioana]

Hey @iamsamgibbs thank you for your review 🙌 I fixed the issue with the Manage tokens action on mobile. I did notice this issue appeared no matter the table size, but was caused by the token name length - as in USDC for Local Development

[iamsamgibbs]

Thanks for the fix and detective work, this looks good now!

[rdig]

Tested all cases both in desktop and mobile and all seem to render just fine. Nicely done Ionana 💯

Manage Tokens:

Split Payment:

Edit Colony:

[bassgeta]

Nice one, table refactor is now 100% done 😎
Paddings not shown on manage tokens ✔️

Split payment pagination isn't shown ✔️

Percentages shown per row and in the footer ✔️

Completed action ✔️


Corners status on edit colony: rounded 🟢

🚢