[backport] Improve swatch table overflow handling

[Cyanoxide]

Description (*)

Updates swatches.css to add overflow:auto to the three swatch tables (text, dropdown & visual) to allow for scrolling if the amount of inputs exceeds the available space and increase the min width of inputs (150px) within the table for better usability.

Intentionally left original input width (50px) as a fallback and updated .col-swatch-min-width to be consistent with 2.3.

Fixed Issues (if relevant)

1. Improve swatch table overflow handling #21421: Improve swatch table overflow handling (original)
2. Fix Swatch Overflow issue #19932: Fix Swatch Overflow issue
3. [Backport] Fix swatch overflow issue #19933: [backport] Fix Swatch Overflow issue

Manual testing scenarios (*)

1. Add multiple store view and languages to your store (Our store has 19 but you should be able to reach replicate the issue with less)
2. Open an attribute page within the Admin area to configure (Stores > Product > Any attribute).
3. Table inputs at the bottom for languages should be too small to to use effectively
4. If 3. isn't true add more store views, the more that are added the smaller the input fields get.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-engcom-team]

Hi @Cyanoxide. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me 2.2-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[Cyanoxide]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @Cyanoxide. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @Cyanoxide, here is your new Magento instance.
Admin access: https://pr-21661.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[dmytro-ch]

Hi @Cyanoxide,
thank you for your contribution.

The original pull request is marked as a cleanup.
Unfortunately, we can't accept this Pull Request to 2.2 release line, all code cleanup should be delivered to 2.3 release line. For more information, please, refer to Magento Code Contributions Guide.

According to the latest changes in contribution guide, the minor style/design fixes are considered as Code Cleanup. Magento Code Contributions Guide - Base achievements

Thank you!

[ghost]

Hi @Cyanoxide, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

[Cyanoxide]

@dmytro-ch You'd know better than me so if that's your final decision then no problem but I'm not sure that that's the correct category. The guide says clean up is for "typos, inline documentation, coding style, remove unused code, minor style/design fixes" However this and the original pull request resolve a functional issue that stops swatches from being usable. Without this fix it is impossible to use swatches with more than 15 storeviews without inspecting and adding these styles manually.

[dmytro-ch]

@Cyanoxide, thank you for the details.
I would also consider the original PR as a bug fix/improvement and reopen the backport.

cc @sidolov @sivaschenko

[magento-engcom-team]

Hi @dmytro-ch, thank you for the review.
ENGCOM-4547 has been created to process this Pull Request

[VasylShvorak]

✔️ QA passed

[ghost]

Hi @Cyanoxide, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.