Small screen responsiveness: Portrait orientation dropdown lists, calendar items are cut off, radio buttons not aligned
- Dominant language
- TypeScript
- Stars
- 29
- Forks
- 15
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 40
Description
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
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the listed application screens in Chrome DevTools using the iPhone 12 Pro, Galaxy S8+, and iPhone SE portrait and landscape profiles. Start by tracing the responsive frontend components for the login, program year, course, radio-button, checkbox, and award sections. Done means dropdowns and calendar items are fully visible, labels and controls are aligned, and the affected screens remain usable in portrait orientation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100