feat(frontend/mobile): viewport + touch-target + safe-area foundations by cristim · Pull Request #989 · LeanerCloud/cloud-commitments-cli

cristim · 2026-06-05T11:19:14Z

Summary

Adds viewport-fit=cover to the existing viewport meta tag for iOS notch support
Adds format-detection=telephone=no to prevent iOS auto-linking numeric data
Adds CSS tap-highlight suppression with explicit :active opacity feedback
Adds safe-area inset padding on topbar and app-shell for notch / home-bar clearance
Adds touch-target minimums (44x44px) under @media (pointer: coarse) only, leaving desktop unaffected
Adds inputmode="numeric" + pattern="[0-9]*" to all 15 numeric inputs for mobile numpad
Adds autocomplete="email" to the notification email input

Per-change rationale

viewport-fit=cover: without this, iOS clips the safe-area environment variables to nothing even when env(safe-area-inset-*) is declared. Required for the safe-area rules to take effect.

format-detection=telephone=no: coverage percentages, grace-period days, and other numeric values in tables would otherwise be auto-highlighted as phone numbers on iOS, creating spurious tap targets and breaking visual layout.

Tap-highlight / :active: the default browser blue flash on touch is jarring and inconsistent with the design system; replacing it with opacity: 0.85 gives tactile feedback without clashing colors.

Safe-area insets: .app-topbar has position: sticky; top: 0 so it must account for the notch height. .app-shell needs bottom padding so the last table row is not obscured by the iPhone home indicator.

Touch-target minimums under @media (pointer: coarse): Apple HIG and WCAG 2.5.8 both cite 44x44px as the minimum. Scoping to coarse-pointer avoids bloating compact desktop buttons. Checkboxes and radio buttons grow via label:has(>input) to keep the glyph size unchanged.

inputmode="numeric" on all 15 numeric inputs: surfaces the number-only keyboard on mobile, removing the need to switch keyboard modes for coverage %, day counts, and ramp parameters.

autocomplete="email": enables browser / password-manager autofill for the notification email field.

Out of scope

Follow-up issues are being tracked separately by the mobile audit agent:

Hamburger / drawer navigation for the sidebar on narrow viewports
Tables to card-view below 480px
Chart resize / aspect-ratio tuning
Modal full-screen below 480px
PWA manifest

Test plan

Load the app on an iPhone (Safari) and verify no blue flash on button tap
Verify numeric inputs show the numeric keypad (no alpha keys)
Verify safe-area padding is visible on a notched iPhone (topbar not clipped, last row not hidden behind home bar)
Verify desktop layout is unchanged (buttons retain compact sizing)
npx tsc --noEmit passes (confirmed clean)
Existing test suite passes (frontend/__tests__/html.test.ts viewport assertion still green)

Closes #983

Summary by CodeRabbit

Mobile Experience Improvements
- Enhanced numeric field input handling with optimized mobile keyboards and validation
- Improved email field autocomplete support
- Larger touch targets for easier mobile interactions
- Better viewport optimization for devices with notches and safe areas
- Refined touch interaction feedback

coderabbitai · 2026-06-05T11:19:21Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 048a7b71-39a0-4994-aacb-454e8b70ddf3

📥 Commits

Reviewing files that changed from the base of the PR and between 3405060 and 87076d0.

📒 Files selected for processing (2)

frontend/src/index.html
frontend/src/styles/responsive.css

📝 Walkthrough

Walkthrough

Frontend mobile usability improvements adding semantic input attributes (inputmode, pattern, autocomplete) to numeric and email form fields, updating viewport meta tag configuration, and introducing mobile CSS foundations for touch-target sizing, safe-area insets, and tap-highlight suppression.

Changes

Mobile UX Enhancements

Layer / File(s)	Summary
HTML form input enhancements `frontend/src/index.html`	Viewport meta tag updated to include `viewport-fit=cover`. All numeric form fields across the application (notification days, cache stale threshold, coverage values, grace periods, ramp schedule intervals, AWS Savings Plans inputs) gain `inputmode="numeric"` and `pattern="[0-9]*"` for improved mobile keyboard behavior and client-side validation. Email field explicitly adds `autocomplete="email"`.
Mobile CSS foundations and scroll behavior `frontend/src/styles/responsive.css`	New "Mobile foundations" section suppresses tap highlights, applies safe-area inset padding to topbar and bottom shell, and enforces minimum 44px touch-target sizing on coarse-pointer (touch) devices via label styling. Removes `body.sidebar-open` scroll-lock rule; updates hamburger comment formatting.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

#983: Mobile touch targets below 44pt on buttons and close/toggle controls—this PR's mobile foundations CSS layer addresses the minimum touch-target sizing and safe-area standards referenced in that issue.
#988: Vector-matched issue that directly aligns with the mobile-readiness fixes (inputmode/pattern and responsive CSS foundations) added in this PR.
#986: Vector-matched issue addressing missing inputmode and autocomplete attributes on form inputs, which are core to this PR's HTML layer.

Suggested labels

priority/p3, urgency/this-quarter, effort/m, type/feat

Poem

🐰 Through tiny screens, the rabbit hops with grace,
Each tap-target now hits its destined place,
With inputmode and safe-area care,
Mobile users find no viewport snare!
Numeric keys flow, emails autocomplete—
A gentler UX, from paw to feet. 🪶

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/mobile-foundations

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cristim · 2026-06-05T11:19:25Z

@coderabbitai review

coderabbitai · 2026-06-05T11:19:30Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

cristim · 2026-06-05T17:31:38Z

@coderabbitai review

coderabbitai · 2026-06-05T17:31:42Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

…ghlight + safe-area padding - viewport: add viewport-fit=cover for iOS notch support; drop spurious initial-scale=1.0 decimal (spec says 1) - meta: add format-detection=telephone=no to stop iOS auto-linkifying numeric data in tables/charts - css: -webkit-tap-highlight-color: transparent on button/a/[role=button] with explicit opacity:0.85 :active feedback instead of the blue flash - css: safe-area-inset-top on .app-topbar and safe-area-inset-bottom on .app-shell so content clears notch and home indicator on iPhone - css: touch-target minimums (min-height/width: 44px) on all interactive controls under @media (pointer: coarse) so desktop layout is unaffected; checkboxes/radios grow via label:has() instead to avoid glyph bloat - html: inputmode="numeric" pattern="[0-9]*" on all 15 numeric inputs (coverage %, grace days, notification days, ramp params) to surface the numeric keypad on mobile - html: autocomplete="email" on the notification email input

cristim · 2026-06-06T06:36:20Z

Rebased on feat/multicloud-web-frontend. Resolved conflict in frontend/src/styles/responsive.css by preserving both sides: mobile foundations (tap-highlight, safe-area, touch-targets from this PR) placed first, then mobile nav drawer (from base). TypeScript clean, 1949 frontend tests pass. CR review deferred - org CR billing blocked.

cristim · 2026-06-08T13:34:51Z

@coderabbitai full review

coderabbitai · 2026-06-08T13:34:57Z

✅ Action performed

Full review finished.

…ums on .btn-small / .toggle-password / .modal-confirm-close (refs #983) (#1499) * test(frontend/mobile): regression coverage for #989 44x44 touch minimums on .btn-small / .toggle-password / .modal-confirm-close (refs #983) Issue #983 asked for min-height:44px on these three selectors. Verified they already inherit the 44x44 minimum on touch devices from the generic `button` rule PR #989 added under @media (pointer: coarse), since all three render as plain <button> elements and no rule overrides min-height/min-width on them. Add a regression test so a future edit can't silently reintroduce a sub-44px override. * fix(frontend/mobile): drop cross-PR collision from touch-target test (#983) The test.each list asserting .btn-small / .toggle-password / .modal-confirm-close declare no sizing props collides with PR #985 (bottom-sheet modal), which gives .modal-confirm-close its own explicit min-width/min-height: 44px (needed since it is absolutely positioned, not sized by content). With both merged, this test goes red. Drop .modal-confirm-close from the list: its explicit 44x44 is a stronger, more direct guarantee than inheriting from the generic coarse-pointer rule, not a regression. .btn-small and .toggle-password still verify against the shared rule as before.

cristim added priority/p2 Backlog-worthy severity/low Minor harm urgency/this-sprint Within the current sprint impact/many Affects most users enhancement New feature or request triaged Item has been triaged labels Jun 5, 2026

cristim mentioned this pull request Jun 5, 2026

mobile: numeric inputs lack inputmode; email/password inputs lack autocomplete #986

Closed

cristim force-pushed the feat/mobile-foundations branch from 0d5af8e to 87076d0 Compare June 6, 2026 06:35

cristim merged commit 568ec61 into feat/multicloud-web-frontend Jun 8, 2026
5 of 6 checks passed

cristim deleted the feat/mobile-foundations branch July 27, 2026 11:09

coderabbitai Bot mentioned this pull request Aug 20, 2026

fix(frontend): move the topbar controls into the drawer below 768px #1877

Merged

cristim mentioned this pull request Sep 2, 2026

Mobile browser readiness: tracking issue #988

Closed

4 tasks

Navigation Menu

Repository navigation

feat(frontend/mobile): viewport + touch-target + safe-area foundations - #989

feat(frontend/mobile): viewport + touch-target + safe-area foundations#989
cristim merged 1 commit into
feat/multicloud-web-frontendfrom
feat/mobile-foundations

cristim commented Jun 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Suggested labels

Poem

Uh oh!

cristim commented Jun 5, 2026

Uh oh!

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

cristim commented Jun 5, 2026

Uh oh!

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

cristim commented Jun 6, 2026

Uh oh!

cristim commented Jun 8, 2026

Uh oh!

coderabbitai Bot commented Jun 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

cristim commented Jun 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Per-change rationale

Out of scope

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Suggested labels

Poem

Uh oh!

cristim commented Jun 5, 2026

Uh oh!

coderabbitai Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cristim commented Jun 5, 2026

Uh oh!

coderabbitai Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cristim commented Jun 6, 2026

Uh oh!

cristim commented Jun 8, 2026

Uh oh!

coderabbitai Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cristim commented Jun 5, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

coderabbitai Bot commented Jun 5, 2026 •

edited

Loading

coderabbitai Bot commented Jun 8, 2026 •

edited

Loading