Site Pages Variation and Page Variations Dropdown menus' dropdown arrow icons are overlayed with text if titles are long enough

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.1.X, Master
• Fix Version/s: Master
• Component/s: Content Publishing > Staging
• Labels:
  • 7.1-could
  • INACTIVE
  • QA-V
  • STAB_TST_JA
  • STAB_TST_JA_MUST
  • UI
• Story Points: 0.25
• Fix Priority: 4
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/66042
• Bug Type: UX / Visual - Desktop

Summary
When adding long titles, or narrowing the width of the browser, the arrow icons on the dropdown for Site Pages Variation and Page Variations will be overlayed with text.

Both sentences, and long strings will work. While groups of strings separated by spaces (i.e. sentences) might be more common, some of the supported localizations will not use spaces (e.g. Japanese) or will use very long compound words (e.g. German).

Steps to Reproduce

1. Product Menu > Liferay DXP Site > Publishing > Staging
2. Select Local Live, and enable Page Versioning on Public Pages, then publish
3. Navigate to the Staging site: Go to Site - > Staging.
4. Click the ellipsis icon next Publish to Live and select Site Pages Variation
5. Click Add Site Pages Variation and add a site pages variation with a long Name such as aaaabbbbccccddddeeeeffffgggghhhhiiii or liferay dxp 7.0 staging site variation
   (NOTE: This can also be reproduced with Page Variations as well)
6. Go back to the top page (change the width of the browser window, also works with shorter names)

Actual Results
Text will be crowded over the arrow icons for both Site Page Variation and Page Variations.

Expected Results
Long strings and spaced words will either be wrapped, or have a maximum displayed characters so as to not influence the placement/position of the dropdown menu size.

Reproduced in
7.0.x private Commit: 40d9e186b7f81ae2c027e7e89fdb1ad890d6eb9f