Product Block Editor: tweak styles/layout of attribute modal implementation

[retrofox]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This polishes the Attributes modal implementation:

1. Align the help component of the Attribute terms
2. Reduce Spinner size to fit correctly in the Attributes help area
3. Set the height for each row to avoid flicks effects
4. Remove focus styles in the terms component user selects it

Closes # .

1. Enable the Product Editor

2. Go to the Variations section

3. Start to add a new attribute

4. Confirm "Align the help component of the Attribute terms":

5. Confirm "Reduce Spinner size to fit correctly in the Attributes help area"

6. Set the height for each row to avoid flicks effects

Confirm each row has a min-height of 80px:

7. Remove focus styles in the terms component user selects it

Confirm it doesn't add an outline style when clicking on it:

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi , @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[louwie17]

LGTM 🚀 Looks good :)