bcgov / bcgov/SIMS

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

Open
#4,302 1 comment 0 reactions 0 assignees View on GitHub
Business Enhancement Mobile/Browser Compatibility Student User Experience User Story
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
image.png

iPhone/Chrome
image.png

GalaxyS8+/Chrome
icon not displayed and words cut off
image.png

**Program Year**
iPhone 12 Pro

Portrait
image.png

Galaxy S8

image.png

Landscape
image.png

**Course Offerings**
iPhone 12 Pro

Portrait/Landscape
image.png

Galaxy S8+: Portrait

image.png

**Course Information**
iPhone 12 Pro/Galaxy S8+

Portrait/Landscape
image.png

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

Portrait/Landscape
image.png

iPhone 12 Pro
**Request a Change: Significant decrease income**

Portrait/Landscape
image.png

image.png

**Vs application "Significant decrease income radio buttons**

image.png

Galaxy S8+
image.png

**Add Dependants**

iPhone 12 Pro
Portrait/Landscape
image.png

Galaxy S8+
image.png

iPhone SE (sample)
image.png

**Consent checkboxes**

iPhone 12 Pro/Galaxy S8+
Portrait
image.png

image.png

image.png

Galaxy S8+

image.png

**Track Your Application**
iPhone 12 Pro
Portrait/Landscape
image.png

Galaxy S8+
image.png

Estimated Award

Galaxy S8+
image.png

**Assessed Costs**
Fine in Landscape
image.png

**Award breakdown**
Portrait
image.png

Galaxy S8+
image.png

**Disbursed Amount (1 Disbursement)**
iPhone 12 Pro

image.png

Galaxy S8+
image.png

- [ ] 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.