FLUID-6660: Improve the CSS positioning of right arrow for mobile (Android)

Metadata

Source
FLUID-6660
Type
Bug
Priority
Minor
Status
Open
Resolution
N/A
Assignee
N/A
Reporter
Jonathan Hung
Created
2021-07-07T11:02:18.264-0400
Updated
2021-07-07T11:02:18.264-0400
Versions
  1. 3.0
Fixed Versions
N/A
Component
  1. Prefs Framework

Description

The next (right) arrow on Prefs Framework on Android appears too close to right edge making it hard to select (especially if the phone has a protective case that wraps around the edge of the bezel). On initial rendering, the right arrow is visually clipped on the edge of the screen.

The CSS styling should be changed so that the arrow lays out properly across different devices, screen and font scaling.

To reproduce:
1. Open any Prefs Framework or UIO demo on build.fluidproject.org
2. Open the preferences panel.
3. notice the position of the Next arrow.

Environments

Android 11
Chrome 91.0.4472.120
Firefox 89.1.1

Attachments