Changes to products table in order to left align the table header and table element

[MrBowmanXD]

What? Why?

• Closes [Admin/products] Column title is not aligned with column content #13448

Changes to the sass code in table products in order to left align table headers and with their respective table elements.

What should we test?

• Visit /admin/products and check if table header/table elements are aligned to the left.
• Visit /admin/feature-toggle and activate the variant tags feature.

Release notes

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

• User facing changes

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

[drummer83]

Thanks! I think you can be brave enough to remove the old code instead of commenting it out. We can always find the history of changes in GitHub. 💪🏻

[MrBowmanXD]

Only saw the comment now, i will remove the commented lines then.

[MrBowmanXD]

Just removed the commented lines.

[MrBowmanXD]

These changes achieve the desired result?

[sigmundpetersen]

@MrBowmanXD this PR is approved by a reviewer and is now awaiting testing from our testing team. That will confirm if the results are as expected. Thank you

[drummer83]

Hi @MrBowmanXD,
Thanks again for this PR. I have tested it on one of our staging servers. We're not yet fully there. Here's what I found!

You changed the scss code in three places, I will go through them one by one.

Products table

This is the table we want to improve. 👍
Changing the padding of the table changes the look of the table because the padding is used to create some sort of border for the table. Setting it to zero makes the border disappear. It does not change the alignment of the table headers. Therefore I don't think these changes are needed here.

Before your PR we can see some sort of border around the table:

After staging the PR that border has disappeared:

Actions Wrapper 2

Here you can see the actions wrapper. It is only visible when changes were made to any of the displayed products. The wrapper is above the table headers which we want to adjust in this PR. I don't see any need to change its scss.

Table header 'with-input'

Looking at this one is a good start! 👍
Here are few comments that might be helpful:

• I'm not sure if we need this 'with-input' class at all. I'd prefer to always have the headers with the same padding and adjust the padding of the cells below to align the content with the header. The default padding without 'with-input' is 12px - which is perfect.
• In most of the content fields we have padding-left 3px from the TD plus 1px border plus padding of the input/button/div. The latter should be 8px to have a total sum of 12px like we have in the headers, but most of them have only 7px - which isn't perfect but we can live with.
• The 'Unit' button has a padding of only 4px (instead of 7 or 8px as mentioned above), which aligns it too far to the left. Would be great if you could fix that.
• The 'Inherits properties' column has content in a different row, therefore the padding isn't applied there and the YES/NO is too far to the left. Would be great if you could add a padding of 12px here too.
• I don't see any need to keep the '&.align-right' definition - it's not being used inside any 'with-input' and shouldn't have any effect.

Additional comment

This whole issue seems to be independent from the feature toggle for variant tags. We just need to make sure that also the tags column is well aligned.

Thanks again for your work on this one. Please reach out if I or any developer can help you moving this forward. ❤️

[drummer83]

There is no need to change this padding. It breaks the table design and doesn't help fixing the issue.

[drummer83]

The actions wrapper is not part of what we want to fix. No need to change this.

[drummer83]

I believe this is not needed anymore at all. Not 100 % sure, but worth having a look.

[MrBowmanXD]

Thank you for the feedback it was very insightfull. Going to take some time to process this information and return with the changes required. It's a pleasure to work on this.