Adjust spacing in/between elements on the Cart and Checkout block pages

[tarunvijwani]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #42108.

With this PR, we're adjusting spacing in/between elements on the Cart and Checkout block pages as per the design,

How to test the changes in this Pull Request:

1. Add a normal product to the site (don't add subscription product).
2. Visit the Cart and Checkout pages
3. Confirm both the Cart and Checkout pages have spacing as per the design attached below.
4. Confirm separator in order summary is not visible.
   
5. Add subscription product to the site.
6. Visit the cart page and confirm the subscription details are aligned with product name and product price.
7. Confirm the borders are uniform in color.
   
8. Visit Checkout page and confirm the contact form is aligned with order summary.

9. Confirm the shipping are not tight have gaps as per the design: 

Design

Figma link: 2JyXNimI4oGeJZhgQNZE9V-fi-819_26489

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Adjust spacing in/between elements on the Cart and Checkout block pages.

[github-actions]

Test Results Summary

Commit SHA: 5017116

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 36s
E2E Tests	291	0	0	45	0	336	6m 18s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[github-actions]

Hi @wavvves,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[senadir]

While I appreciate the spacing on the sidebar

I find it to be inconsistent in the main Checkout form, possibly a bug for the email one (running 2024).

I also think the new spacing is too dense in some areas but too lose in others, in the order summary, the line hight + padding makes the lines too spread out while things are too dense on the main Checkout body.

[tarunvijwani]

Thank you for the suggestions, @senadir. I'm moving the PR to draft to make the suggested changes in Slack: p1707223474247879-slack-C8X6Q7XQU

[tarunvijwani]

@senadir @nikkivias I have updated the line height for the set description and fixed the margin-top of the email field. Here is how it looks now:

I feel it looks good now. I'd love to hear your thoughts about it.

[nikkivias]

Hi team, there are some of the things I noticed. Regarding the item separators in the order summary, there should be a bigger gap after the border, but its not accounting for the item quantity so it looks tight right now. However, I am thinking we remove the borders all together for a cleaner look. Also if you notice they are shorter and not aligned with the other borders.

@tarunvijwani @senadir

[tarunvijwani]

@nikkivias Thank you for reviewing the changes. I'd appreciate some input for the following:

The below items are as per the design. I'd be happy to update it. Please let me know how much gap we should leave for them:

Cart Totals

Design	Actual

Order Summary Gap

Design	Actual

The images needs to be moved down:

Before	After

Product Separator

We discussed this earlier in Figma: 2JyXNimI4oGeJZhgQNZE9V-fi-819:26489#684299023 about keeping the separator. I won't mind removing it; please let me know.

Should we keep it at full width or remove it?

Site header

Please ignore it. This is the site header and should be controlled by the Merchant while designing their site. It will be the same throughout the site.

Payment option gap

Design	Actual

The problem is with the multiple packages option. It should have a 16px gap instead of 8 px. I will fix that in the next commit:

Sub text space for the payment method

Sure, I'll update it in the next commit.

Additional border

I will fix it in the next commit.

Line-height in cart line items

Changing the line height to these numbers will shrink the space between them. Are we sure we need to change the line height for them?

Screen.Recording.2024-02-10.at.12.50.24.AM.mov

Screen.Recording.2024-02-10.at.12.48.40.AM.mov

I'll wait for your reply before making further changes; please take your time and let me know.

[senadir]

Visually speaking, this is really consistent and nice!

One note is that the payment spacing is a bit off, even following the design spec. I raised that with Nikki and we can address in a follow up.

[nielslange]

The design of the Cart block shows a spacing of 16px between the page title and the cart line items. On my end, I see a spacing of 19.2px:

[nielslange]

The design of the Cart block shows a spacing of 24px between the cross-sells title and the cross-sells products. On my end, I see a spacing of 44.4px:

[senadir]

@nielslange those seems to be coming from the theme and applied to the page layout, and not from the block? editing those directly would impact the theme control negatively.

[nielslange]

According to the design, the spaces between the cross-sells product metadata should be 16px. On my end, I see a spacing of 16.8px and the spacing between the star rating and the price seems to be only 14px.

[nielslange]

@nielslange those seems to be coming from the theme and applied to the page layout, and not from the block? editing those directly would impact the theme control negatively.

If that's the case, then I'm unable to test step 3. of the testing instructions, which states:

3. Confirm both the Cart and Checkout pages have spacing as per the design attached below.

On my end, I simply see different spaces than the ones mentioned in the design.

[tarunvijwani]

Thank you so much for the feedback, @senadir and @nielslange. I'll take a look and get back to you on this. Ideally, we should not have these inconsistencies.

[tarunvijwani]

@nielslange It was happening because I was using em conversion. I replaced it with normal px, and it should be fine now. I'd appreciate it if you could review the PR again.

[tarunvijwani]

The design of the Cart block shows a spacing of 24px between the cross-sells title and the cross-sells products. On my end, I see a spacing of 44.4px:

I agree with @senadir. Since this is outside the block, we should not manipulate the theme layout. It should be controlled by the merchant.

Screen.Recording.2024-02-16.at.8.13.50.PM.mov

[wavvves]

After testing this, while the figma changes look ok on desktop, on mobile I'm not seeing the changes described in figma, and actually it seems to be inheriting desktop changed props, making Cart and Checkout display even less information above fold 🫤

	Figma	Before	After
Cart
Checkout

[wavvves]

Approving this, thank you for the patience @tarunvijwani, mobile looks way better now :)

[tarunvijwani]

Thank you for the suggestions and feedback, @wavvves! 🎉