Buttons misaligned in Mobile View

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 6.2.X EE
• Fix Version/s: 6.2.4 CE GA5, 6.2.X EE
• Component/s: ~ [Archived] Frontend Infrastructure, ~[Archived] UI Taglibs
• Labels:
  • liferay-fixpack-portal-65-6210
• Branch Version/s:
  6.2.x
• Backported to Branch:
  Committed
• Story Points: 12
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal-ee/pull/10860

Description
Any buttons after the first button will be misaligned when in Mobile view.

Steps to Reproduce

Scenario 1

1. Add two Mobile Device Families
2. Navigate to Admin > Site Administration > Pages > Mobile Device Rules
3. Select the two Mobile Device Families
4. Shrink web page small enough to show the mobile UI

Expected Results
The Select Device Family and Manage Rule Priorities buttons will be aligned.
Actual Results
The Manage Rule Priorities button is 5 pixels to the right.

Scenario 2

1. Sign in as an Admin
2. Navigate to Add > Content on default page
3. Shrink web page small enough to show the mobile UI

Expected Results
All buttons are aligned.
Actual Results
The List and Descriptive view buttons will be 1 pixel to the left of the Icon view button.

Scenario 3

1. Deploy Kaleo Web
2. Assign Single Approver workflow to web content
3. Create a web content and submit it for publication
4. Navigate to Control Panel > Workflow > Submissions > Single Approver
5. Click "Assign to Me"
6. Shrink web page small enough to show the mobile UI

Expected Results
Ok and Canel buttons are alligned
Actual Results
Cancel button is 5 pixels to the right of the Ok button.

Reproduced on
ee-6.2.x: ef4c0628f07a7a13aa6615d4c4d0ff3668d4bc59
Plugins ee-6.2.x: eb3d6d2ed20ca6e8f6138003509bd3cc15ee8371

Issue does not occur in master due to using bootstrap 3 in Alloy-ui 3.
master: fd281d2de0618b5d358bf1cb482e88cc1ff47822