UI distorted on Product Visibility Account Page

Issue

• Whenever user enables/disables the account group toggle button under visibility tab, a distorted UI appears.

  Steps to reproduce:
  1. Start Liferay DXP 7.4 U83.
  2. Create two account groups.
  3. Create a product.
  4. Go to Visibility tab.
  5. Enable Account groups Toggle
  6. Add both account groups by clicking on the plus button.
  7. Publish the product.
  8. Again go to the Visibility Tab and Disable the Account Group toggle.
  9. Publish the product.
  10. Again Enable the Account Group toggle.
  11. UI is distorted if you see the list of account groups.

  Expected Results: UI should be proper without refreshing or publishing the product.
  Actual Results: UI is distorted upon checking account groups.

Environment

• Liferay DXP 7.4
• Commerce 4.0

Resolution

• As of now (at the time of writing this article), this concern (UI distortion) is a limitation of the product; however, this feature request can be tracked here: LPD-10730

Additional Information

• As a workaround to overcome this behavior, kindly save or publish the product again after enabling the visibility toggle button.