The opportunity is to bring the mobile experience up to the same standard as the desktop one.
The application works. It has worked for years, and the team has been disciplined about the things that usually slip — design tokens, semantic HTML, a stable component system. Zero hardcoded hex colors in source. Phone numbers tappable across the app. Calendar collapses cleanly on mobile.
What changes on the phone is a different story. The app renders as a shrunk-down desktop view rather than a mobile experience. Inputs become smaller than the keys typing into them. Modals contain tables wider than the phone itself. The half-dozen mobile-native conveniences HCPs see in every other app they use are missing.
format_phone helper wraps every number in a
tel: link. HCPs and admins can dial a facility or an HCP with one tap.$breakpoint-small. The team knows how to do this when they choose
to.<select> — so mobile
users get the platform scroll wheel rather than a clunky web replacement.Five gaps observed on a 375 px phone. None of these are visible from a 27" monitor — which is precisely why they've stayed hidden.
The Add-Shift modal renders the desktop 10-column table on phones — Start Date, HCP, Facility, Department, Shift, Start Time, End Time, EC, FC, Delete. Each shift requires 637 px of horizontal swiping inside the modal. Column labels truncate to "Please" and "EC"/"FC". This is the single highest-leverage mobile fix in the assessment.
The New HCP form puts five name fields in a single horizontal row on a 375 px phone. Measured live: Prefix 36×36 px, First Name 60×36, Middle 60×36, Last 60×36, Suffix 36×36. The required "First Name" input is 60 pixels wide — about 6 characters before horizontal scroll. The iOS keyboard's spacebar is wider.
The sign-in card has a fixed 450 px width. On a 375 px phone the "Sign in" button is partially sliced off, the logo wraps, and the company footer overflows horizontally. This is the very first thing an HCP sees on their phone — a broken card before they can even authenticate.
About 80 px — 21% of the horizontal viewport — is permanently lost to a navigation rail that ought to live behind a drawer toggle. HCPs get a proper drawer pattern. Admins do not, even though admins also use the platform on phones. The hamburger toggle also sits in the top-right rather than the top-left iOS/Android convention.
NHCS already has the building blocks: ActionCable is configured for Turbo Streams, a notification model already exists, and an apple-touch-icon ships with the static assets. Adding a manifest file (~50 lines), a service worker that caches the HCP's next 7 days of schedule, and a Web Push bridge to the existing notification model gives HCPs install-to-home-screen, offline schedule lookup, and "Shift confirmed" on the lock screen — without a native app or App Store submission.
Explore the redesigned mobile experience on a true phone-sized canvas: responsive tables, restacked forms, and the new HCP list pattern.
yodel-refine-52701944.figma.sitecomponents/form.scss restacks every multi-column form to one column, lifts inputs to 44 px, kills
iOS auto-zoom.<table> with
data-head attributes, three CSS modes (desktop table → tablet labeled rows → mobile stacked cards). Same
HTML, no separate templates.