emba-course-solver/openspec/changes/mobile-specializations-floating-banner/proposal.md at main

Files

Bill Ballou 7940050196 Add mobile floating banners for specialization status and course selection progress

On mobile, the single-column layout makes it easy to lose context when
scrolling between the specializations and course selection panels. This adds
two floating banners that appear via IntersectionObserver:

- Top banner: summarizes specialization statuses (achieved/achievable/missing/unreachable)
- Bottom banner: shows course selection progress (N/12 selected)

Both slide in/out with CSS transitions and scroll to their respective
sections on tap. Only rendered on mobile viewports (max-width: 639px).

2026-02-28 22:27:07 -05:00

1.9 KiB

Raw Permalink Blame History

Why

On mobile, the specializations panel stacks above the course selection panel and scrolls naturally with the page. Once a user scrolls down to interact with course selections, they lose visibility of the specialization statuses (achieved, achievable, missing required, unreachable). This forces constant scrolling back up to check how course picks affect specialization progress. A floating summary banner solves this by keeping the key status information visible while the user works through their course selections.

What Changes

Add a floating banner that appears at the top of the viewport on mobile after the user scrolls past the specializations section
The banner summarizes specialization statuses: count of achieved, achievable, missing required, and unreachable specializations
Uses the same color-coded status badges already defined in STATUS_STYLES
The banner animates in/out based on scroll position using an IntersectionObserver on the specializations section
Tapping the banner scrolls back to the full specializations panel
Only renders on mobile breakpoint (max-width: 639px)

Capabilities

New Capabilities

mobile-status-banner: A floating UI component that summarizes specialization statuses on mobile when the specializations section is scrolled out of view

Modified Capabilities

Impact

Components: New MobileStatusBanner component; minor changes to App.tsx to mount it and pass specialization data
Hooks: May add a small scroll-detection hook or use IntersectionObserver inline
Styling: Introduces the first position: fixed element in the codebase; needs appropriate z-index to layer above content
Dependencies: No new libraries required — IntersectionObserver is a browser API
Performance: Minimal — observer fires only on intersection changes, not on every scroll event

1.9 KiB Raw Permalink Blame History

Why