Reduce padding for Mix and Match mobile styles

[helgatheviking]

Is your feature request related to a problem? Please describe.

Storefront has some built-in styling for Mix and Match products. When in mobile view though, there's rather a lot of padding around the table cells.

Describe the solution you'd like

Reduce padding for mobile.

Additional context

[imanish003]

Hi @helgatheviking, Thanks so much for reporting this issue! 🙏

I tried reproducing the issue, but it isn't reproducing. I don't see any additional style added to product-thumbnail cell by Storefront for mix-and-match products, as you can see in screenshot below:

There is a generic CSS style for table cell added by the storefront, which is overridden by mix and match product plugin CSS:

Generic CSS will be added to all table cells & You may always override generic table CSS with custom CSS wherever required.

[helgatheviking]

Is the call coming from inside the house? :) I'm in a bit of an end-of-year no-code mode, but I will try to check on this next week.

[imanish003]

Hey @helgatheviking , Yes. No worries, take your time 🤝

[kmanijak]

Hi @helgatheviking, I’m going to close this because there still isn’t anything actionable for us on this issue. If/when you have additional details, you can still add them to this issue and if we’re able to reproduce, we can re-open as necessary.

[helgatheviking]

Finally looking again thanks to the GH notification... and it's definitely the padding in storefront:

Specifically this one:

.mnm_table .product-thumbnail, .mnm_table .product-name, .mnm_table .product-quantity, .mnm_table .container-quantity {
  padding: .6180469716em .875em !important;
}

at the smallest widths I think this padding is way too big and might be better wrapped in a media query.

I'm gonna take a look at mobile table styles on my end first and then see what might be needed here.