Optimize fields selector icons and text in Document Type (DM) and Structure (WCM)'s Metadata Fields

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.X, Master
• Fix Version/s: 7.1.10 DXP FP3, 7.1.1 CE GA2, 7.1.10.1 SP1, 7.1.X, Master
• Component/s: Dynamic Data Mapping > Form Builder
• Labels:
  • Front-end-forms
  • QA-V
  • STAB_TST_JA
  • STAB_TST_JA_MUST
  • liferay-dxp-71-sp1
  • liferay-fixpack-dxp-3-7110
• Branch Version/s:
  7.1.x
• Backported to Branch:
  Committed
• Story Points: 1
• Fix Priority: 3
• Sprint: F&W Sprint 5
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/63382

Summary
The fields selector in Document Type (in Documents and Media) and Structures (in Web Content) is too close together, causing the label buttons to be truncated. It seems that this is unnecessarily tight, and should not be handled in this manner. This happens for all localizations.

In Japanese in particular, it's extremely difficult to identify what the icons will click into. For example, "Text box" and "Text Area" only have the opportunity to display "text" and "text" (テキスト... and テキスト...) causing confusion.

 
 
Steps to Reproduce

1. Go into Product Menu > Liferay DXP > Content > Document & Media > Document Types
2. Add a new Document Type
3. Observe the Fields section under "Main Metadata Fields"

(Note: This also is present in Product Menu > Liferay DXP > Content > Web Content > Structures)

Actual Results
Fields icon are too close to each other, and text is truncated.

Expected Results
Layout displays the icons as well as any subtext in a uniform manner.

Reproduced In
7.1.X Private Commit: 40d9e186b7f81ae2c027e7e89fdb1ad890d6eb9f