[Customer][Order->Edit] Inconsistent table format on (editable) order confirmation page

[filipefurtad0]

Description

For editable orders - i.e., orders which can be cancelled or line items amount changed by the customer, while the OC is open - the table in the order confirmation page shows an inconsistent format.

Expected Behavior

Table format should be consistent.

Actual Behaviour

Table formatting is inconsistent (blank space is visible).

Steps to Reproduce

1. As an admin: Set up a hub to accept order edits - Under Shop Preferences toggle "Customers can change / cancel orders while order cycle is open"
2. As a customer: Place an order on that Hub
3. As a customer: Edit that order - visit /account#/orders and click Edit for that order -> Notice the blank space on the table.

(This affects only order confirmation page while the OC is open:

4. As an admin: Close the order cycle
5. As a customer: Edit that order -> notice the formatting is correct)

OR:

Skip all steps and visit: https://staging.openfoodnetwork.org.uk/orders/R632653401?order_token=a629d72866356506

Animated Gif/Screenshot

Workaround

Does not affect functionality.

Severity

bug-s5: we can live with it, only a few users impacted

Your Environment

• Version used: v4.2.29
• Browser name and version: Firefox 108.02 (does not affect Chrome)
• Operating System and version (desktop or mobile): Ubuntu 22.04

Possible Fix

[drummer83]

Maybe introduced when we added 'Back to Website' button (not visible on your screenshot)?

[filipefurtad0]

No, I had checked that PR at the time, it was fine - it's broken now:

This could just be a browser issue (updated the issue). Not sure.

[jibees]

I'm not sure to know how to reproduce this one... by As a customer: Edit that order, what do you mean? This is what I get:

[filipefurtad0]

Hey @jibees ,

Sorry, I guess I should have been more explicit :see_no_evil: I've edited above. If the enterprise is set accordingly (step 1) and the order cycle is still open then, the customers can edit orders. Do to so, log in as a customer and visit /account#/orders and click Edit for that order:

This will lead the user to the order confirmation screen.

[jibees]

Found it. This is due to https://github.com/openfoodfoundation/openfoodnetwork/pull/10103 and that particular line #14:

https://github.com/openfoodfoundation/openfoodnetwork/blob/fd446970cafdaf311844b46a3299fb1de3141715/app/webpacker/css/darkswarm/cart-page.scss#L12-L14

the <table /> is therefore display: block; instead of its inherit display which is display: table;

[RachL]

FYI this is reproductible on order confirmation page as well. I've just tested on production:

[filipefurtad0]

FYI this is reproductible on order confirmation page as well. I've just tested on production:

Yes, I can see it too in order confirmation pages (either editing or after checkout), but only for editable orders. Is that the case, on that pic @RachL ?

[RachL]

Yep!

[ashwini-seshadri]

Hello, is this issue still open? If so, I would love to work on this! :) Thank you!

[sigmundpetersen]

Sure, thank you @ashwini-seshadri 👍

[drummer83]

Thank you @ashwini-seshadri! I have just checked. The problem is still there, but it's smaller now - at least on my device and browser (Firefox).

Here is a screenshot: