Fix gaps in cart & checkout tables on Firefox

[ndossougbete]

What? Why?

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

Tables from the cart and checkout pages would show some gaps where the table content doesn't extend to take all the available space. Not forcing the display CSS property of table elements to block appears to fix the issue without adverse side effects.

before	after

The display: block properties were originally added in PR #10103 to address issue #9976 on mobile, but it does not seem to be working anymore, with or without this patch. For example, in the screenshot below, the white gap at the right of the footer hints at how much extra width is added on the page:

PR #10103 was aiming to make the table itself scroll horizontally while keeping the overall body width matching the viewport. It doesn't work today, and upon testing, seems unfeasible on Firefox (see the issue mentioned on https://stackoverflow.com/a/48736763, compare behaviour on Chrome & Firefox). If it was working, it would be sometimes confusing as there would be no or very little indication that the table has the ability to scroll. I would suggest to entirely change the table's layout on Mobile instead. For example, put price, quantity and the remove button below the item title and description, so that everything can fit without needing to scroll.

What should we test?

Repro steps:

1. A mobile device or some way to simulate it will be needed. I used the mobile/responsive mode from dev tools. E.g. on Firefox , the Galaxy Note 20 at 412px width.
2. As an admin: In one of the hubs, edit some of the items to make sure a few have some reasonably long name without spaces, so that it is not auto-wrapped. Example: on my simulated phone above, I observed "Mushrooms" to be long enough to cause the issue.
3. As a customer, on a mobile device: Edit an already placed order:
   • Place an order on that hub
   • Visit /account#/orders and click "Edit" for that order -> Notice that the whole page scrolls horizontally

There is also an affected table on the cart page, but I couldn't repro the issue there.

Release notes

Changelog Category (reviewers may add a label for the release notes):

• Technical changes only

The title of the pull request will be included in the release notes.

[dacook]

Great, thankyou for your detailed explanation, and pointing out that #9976 is not working.
We'll test this out and consider re-opening the issue.

[ndossougbete]

Hello @dacook this is my first PR, can you please clarify if there is any action item for me before merging this? Or are we just waiting for more tests/verifications? Thanks!

[dacook]

Hi @ndossougbete, sorry for the delay, but yes we need an expert to manually test and verify this change before merging. Our testing team has limited capacity and there is a large backlog at the moment, so this will take longer than usual.

Thanks again for your contribution, it will get there eventually!

[drummer83]

Hi @ndossougbete,
Thank you so much for working on this issue and for your deep investigation. 🙏

I have tested before and after staging your PR on our testing server. There are four pages I found having a similar version of the table available, so I decided to compare their behaviour.

Firefox

Page	Table ID	Before		After
		Gap	Scrolling	Gap	Scrolling
Edit cart	cart-detail	No ✔️	Table (see image 1 below) ✔️	No ✔️	Page body (content readable, but broken page layout, see image 2 below) ✔️ ❌
Order summary	line-items	No ✔️	Table ✔️	No ✔️	Page body (content readable, but broken page layout) ✔️ ❌
Order confirmation	line-items	No ✔️	Page body (content readable, but broken page layout) ✔️ ❌	No ✔️	Page body (content readable, but broken page layout) ✔️ ❌
Editable order confirmation	cart-detail	Yes ❌	Page body (content readable, but broken page layout) ✔️ ❌	No ✔️ 🥳	Page body (content readable, but broken page layout) ✔️ ❌

Image 1

Image 2

Conclusion

This is a tricky one.
Your PR is solving the issue with the "gap" in the table on Firefox. Excellent! 🥳 💪
However, it comes at a cost. We now have the scrolling of the full page body in case of long line item names. This is breaking the page layout. Before, we would simply have a scrollbar on the line item table, which I find acceptable.
But, we have this exact behaviour with broken page layout in other places in the app anyway: order confirmation and editable order confirmation. Something must be better designed on this overall page compared to order summary and edit cart. Maybe finding this difference is the solution?

Feedback

@openfoodfoundation/train-drivers-product-owners What do you think? Is the benefit of the fixed gap greater than the cost of the broken page layout? I personally don't think so. Let us know and we will take it from there.

Testing note

Before merging this should be tested on Chrome and Safari as well.

Thanks again @ndossougbete! Let's see how we move on!