Small screen responsiveness: Portrait orientation dropdown lists, calendar items are cut off, radio buttons not aligned

[astridSABC]

Note: Used Chrome>More Tools>Developer Tools iPhone 12 Pro, Galaxy S8+ and cell phone iPhone SE

As a student user, I want to use my phone as I don't have a laptop and or tablet so that I can apply for StudentAid.

As a student user, I want to use my phone in either portrait or landscape orientation so that I can hold my phone that is most comfortable for me.

As a student user, I want to have communication to me that the phone is best used in a horizontal orientation so that I won't get frustrated when I start using it in portrait orientation where dropdown lists and calendar items are cut off.

Acceptance Criteria

• Use my iPhone or Galaxy in Portrait orientation

Log in button
Windows/Chrome

iPhone/Chrome

GalaxyS8+/Chrome
icon not displayed and words cut off

Program Year
iPhone 12 Pro

Portrait

Galaxy S8

Landscape

Course Offerings
iPhone 12 Pro

Portrait/Landscape

Galaxy S8+: Portrait

Course Information
iPhone 12 Pro/Galaxy S8+

Portrait/Landscape

Radio button alignment (all radio buttons)
iPhone 12 Pro/Galaxy S8+

Portrait/Landscape

iPhone 12 Pro
Request a Change: Significant decrease income

Portrait/Landscape

Vs application "Significant decrease income radio buttons

Galaxy S8+

Add Dependants

iPhone 12 Pro
Portrait/Landscape

Galaxy S8+

iPhone SE (sample)

Consent checkboxes

iPhone 12 Pro/Galaxy S8+
Portrait

Galaxy S8+

Track Your Application
iPhone 12 Pro
Portrait/Landscape

Galaxy S8+

Estimated Award

Galaxy S8+

Assessed Costs
Fine in Landscape

Award breakdown
Portrait

Galaxy S8+

Disbursed Amount (1 Disbursement)
iPhone 12 Pro

Galaxy S8+

• Communication that "Best used in horizontal orientation" with a photo of what that looks like is somewhere on the SIMS home page (or on the SIMS website COMMs team) [TBD]

TQ TC: 4262

[CarlyCotton]

No full blockers identified but useability issues identified. Post-FT