Make checkout sidebar (order summary) sticky on desktop

[senadir]

This PR turns the order summary to sticky on desktop, but keeps as is for now on mobile, because we're going to switch up how it's rendered.

Closes #42230

Screen.Recording.2024-05-10.at.8.30.42.PM.mov

How to test the changes in this Pull Request:

1. Test scrolling on different browsers, make sure the whole sidebar is visible.
2. Ensure the cart sidebar is also sticky.
3. Ensure that on mobile, it's not sticky.

Ensure that warning in the sidebar are also sticky:

1. Enable Local Pickup.
2. Disable shipping via WooCommerce -> Settings -> General section or by disable all existing rates.
3. On Checkout, go to shipping, make sure the warning is visible and sticky.

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

Mark the checkout block sidebar as sticky on desktop.

Comment

[github-actions]

Hi @opr,

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[opr]

This works great in Edge, Firefox, and Safari.

Noting that this also makes the cart sidebar sticky, is this intentional? With many shipping methods, or many packages in the cart, the proceed to checkout button is hidden from view until the user scrolls all the way down, I feel like this isn't the best behaviour, could we confirm that this is intentional?

I also have some feedback on the testing instructions, for the Ensure that warning in the sidebar are also sticky: section, I think it'd be nice if you mention that shipping is disabled in the WooCommerce -> Settings -> General section. (Just to help testers out a bit with finding that option).

Thanks Nadir!

[nikkivias]

Agree with Thomas that we only apply this to the Checkout summary

[senadir]

FWI @opr this wasn't approved.

[opr]

Working great for me on Edge, Firefox, and Safari. 🚢 it!