Store Order: Clean up table view on smaller screens

[ryelle]

Fixes #17910 - improves the layout of the order details page on small screens. This updates the line items so that the product name spans the full width, any coupons applied also span the full width of the screen, and the payment & fulfillment buttons wrap to a new line. The "activity log" & address sections work without any adjustments.

Before	After

To test

On a screen or browser smaller than 660px wide…

• View a single order on your store: /store/order/:site/:id
• Make sure the product details look ok 👍
• See Store: Clean up header on smaller screens #22541 for header & actions improvements

This doesn't help the create or edit screen, or refunds, or the shipping label modal, this is just for the single order view.

[matticbot]

Test live: https://calypso.live/?branch=update/store-order-small-screen

[shaunandrews]

The layout is much better. The "Cost" heading does look a little out of place. Maybe just ditch it? Also, do we need to show the cost at all if the quantity is 1?

However, the layout on the FEE row looks off now — it looks better before. Can we have it both ways?

[shaunandrews]

Oh, and maybe the quantity and total should align themselves to the top of their cell?

[ryelle]

Quantity & total are aligned to the top, the product title is full-width – it's just that those are shorter products. This is a longer example:

[shaunandrews]

Ah, I see now. I think its overall a better layout that what you have currently.

[jameskoster]

This is an improvement for sure, but I'd prefer us to ditch the table altogether on mobile and do something similar to @olaolusoga's designs for the app - p99K0U-pu

Obviously that's quite a bit more work but I think it would be a significant improvement.

[kellychoffman]

Obviously that's quite a bit more work but I think it would be a significant improvement.

Agree but its outside the scope of this PR and should be added as a separate issue.

[timmyc]

I think this is a great improvement over what we currently have on small viewports. I say we get this out there and hope we can revisit later and pursue a non-table solution.