- CompareBar: add Mobile and MobileSingle stories (viewport: mobile1)
so the xs-only collapse / auto-peek behaviour is discoverable in
Storybook without setting up a live basket.
- PackageDetail InCart story description updated to match the final
toggle pattern (was stale from the earlier inert-pill attempt).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Single-Paper collapse: dropped the two-Slide scheme for a single
right-anchored Paper on mobile. The middle content (status text +
Compare button) animates to max-width:0 while the pill's right edge
stays fixed, so the whole thing appears to retract to the corner as
one unit rather than two stacked transitions.
- Collapse chevron: grey-filled circle (neutral-200 bg, neutral-300
hover) that swaps between right-chevron (collapse) and left-chevron
(expand) based on state. Always rendered — the IconButton stays in
the layout so the icon swap happens in place.
- Collapsed badge: shows just the count ("1") instead of "1/3" so it
reads as a circle at mini size. Min-width pinned to badge-height-md
so any digit (1–3) renders circular. Expanded state keeps "N/3".
- z-index fix: CompareBar dropped from snackbar (1400) → drawer (1200);
MapProviderDrawer raised from 3 → modal (1300). The drawer now
visually covers the CompareBar when a pin or cluster is active on
the mobile map view. CompareBar returns as soon as the drawer is
dismissed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mobile users can now tap a right-chevron on the expanded bar to slide
it out; a mini peek-pill anchored bottom-right replaces it, showing
just the fraction badge (N/3) + a left-chevron to expand. Tap
anywhere on the mini-pill to bring the full bar back.
Packages-being-tallied feedback: when a new package is added while
the bar is collapsed, the full bar auto-peeks back in for 3 seconds,
then slides out again. The user sees the count update register
without having to tap to expand.
Two stacked Slide wrappers handle the direction-aware transitions:
- Full bar slides up from below (initial show + peek re-entry).
- Mini-pill slides in from the right (on user-triggered collapse).
Collapse state resets to expanded when the basket empties, so the
next fresh fill starts with the friendly default visible.
Desktop (md+) stays permanently expanded — the collapse chevron
doesn't render; there's plenty of space. Collapsing is a mobile-only
affordance.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previous offset used theme.spacing(9) assuming 8px MUI default base —
but the FA theme uses a 4px base, so spacing(9) was only 36px and
the pill still sat 3px below the ~40px HelpBar. Bumped to spacing(16)
(64px) for a clean 25px gap above HelpBar on both mobile and desktop.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Raise bottom offset from theme.spacing(3) (24px) → theme.spacing(9)
(72px) so the pill clears the sticky HelpBar with ~16px breathing.
- Centering: swap `left:50%; transform: translateX(-50%)` for
`left:0; right:0; mx:auto; width:fit-content`. Slide (the wrapper)
animates via transform, which was clobbering our centering transform
and leaving the bar's left edge at the viewport centre instead of
its centre (measured 171px off-centre pre-fix). Auto-margin
centering doesn't fight Slide's animation.
- Mobile sizing: responsive step-down on xs —
- Badge: large (32px) → medium (26px)
- Typography: body1 (16px) → body2 (14px)
- Button: medium (40px) → small (32px)
- Container: gap 2→1.5, px 3→2, py 1.5→1
md+ keeps the larger sizes from the earlier bump.
Rejected alternatives: slide/peek collapsed-state (adds interaction
cost and hides state behind a tap — bad for FA's grief-sensitive
audience); full-width bottom bar (loses the "floating reminder" pill
character).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Badge: medium (26px) → large (32px) — matches the visual weight of
the now-body1 status text and medium Compare button. Badge atom's
large variant uses the --fa-badge-*-lg tokens (height 32px, font-size
and icon-size stepped up together).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Badge: small (22px) → medium (26px)
- Typography: body2 (14px) → body1 (16px)
- Compare Button: small (32px) → medium (40px)
- Container padding: px 2.5 → 3, py 1.25 → 1.5 for proportional breathing
- maxWidth: md 420 → 460 to accommodate larger Button + padding
- gap: 1.5 → 2 between elements
- Drop CompareArrowsIcon from the Compare button — the label alone
reads clearly at the new size and removes visual noise
Positioning unchanged: the fixed bottom-centre pill defaults stay in
the component (it IS a floating compare pill — that's definitional),
with the caller's `sx` merged after so any page can override
(`sx={{ bottom: 96 }}`) when it needs to dodge another fixed element.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
