Cell background color is not applied properly on mobile table component

[minkyngkm]

Describe the bug While working on table using Table / Mobile card for ubuntu.com/pro.

Bug found here :

This needs to look like this :

I noticed when the background color is applied to td, the entire td cell background does not change because of the tr padding. I had to use custom styles locally to fix this. Should this be fixed in vanilla for future use? What do you think?

[bartaz]

@lyubomir-popov Any thoughts on this?

Having background on cells doesn't align well with the borders between them in mobile view.

[lyubomir-popov]

@bartaz I worked with Min on the workaround above and encouraged her to file an issue, so I agree with what is being proposed. But we do need to test to see whether this will backfire and thus constitute a breaking change.

[lyubomir-popov]

@bartaz can we please adjust the borders to have left and right properties to maintain the current design.

[bartaz]

@lyubomir-popov what do you mean exactly?

Could you provide an image of how we want this too look like, on mobile, with and without background?

[lyubomir-popov]

@bartaz trying it in the browser I realised we need a way to hide adjacent borders e.g. on the lower row. Maybe we can adjust the selector for borders to something like td+td(not:'.has-background')::before? (haven't tested that but hopefully it gives you an idea).

[bartaz]

Triage: high effort, medium/low impact. To be considered in new architecture. Do we want to be able to colour individual cells?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15218.

This message was autogenerated

[bartaz]

New architecture consideration when tables are migrated. Do we even need table cards still? And do we need to have coloured cells?