The column elements are overlapping on small screen width

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.2.10 DXP FP1, 7.2.1 CE GA2, 7.2.X
• Component/s: Workflow
• Labels:
  • QA-B
  • liferay-fixpack-dxp-1-7210
• Branch Version/s:
  7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Sprint: Workflow_7.2_14, Workflow_7.2_13
• Bug Type: UX / Visual - Desktop

Setup

• Under Control Panel > Workflow > Process Builder, make sure the workflow Single Approver is published;

Step-by-Step:

1. Under Site Panel > Content & Data > Forms, create a new form, assign Single Approver workflow to it, and publish it;
2. Go to the form page and submit an entry for approval;
3. Go to Control Panel > Workflow > Metrics;
4. Create a new SLA for Single Approver and wait >1min;
5. Access the Single Approver report page;
6. Click on the card "Total pending";
7. Resize the browser window to a mobile size;

Actual result:

• The icon and numbers elements under ID column are overlapping and the last column title is not following the table margin;
• The spacing between icon and numbers is too big;

Expected:

• The table should keep the spacing between column entries and display an horizontal scroll to make all content accessible.
• The spacing between icon and numbers should be 16px;

Environment: master-private (Liferay DXP 7.2 EE) http://192.168.109.41:7200/

Evidence:

Browsers:

• Chrome Latest