Improve Context Menu Mobile Layout

[Yanko Mirov (tranculent)]

Summary

Style improvements and new compound parts for BpkContextMenu, building on the initial component shipped in #4913.

Changes

New compound parts

Part	Purpose
BpkContextMenu.StickyHeader	Anchors its children to the top of the scrolling card — use to pin action items above a long scrollable list
BpkContextMenu.BackButton	Mobile-only back button (hidden above mobile breakpoint). Automatically closes the menu at root level, or pops the navigation stack when inside a sub-panel
BpkContextMenu.ScrollableList	Scopes the scrollbar to just the trip list, keeping it out of the sticky header area
BpkContextMenu.PanelGroup	Navigation context that manages a stack of panel IDs
BpkContextMenu.Panel	Renders its children only when it is the active panel — enables in-place drill-down sub-menus on mobile
BpkContextMenu.SaveTrigger	Pre-styled circular heart-icon trigger (previously added in #4913, refined here)

Sub-menu navigation (mobile/desktop split)

• BpkContextMenu.TriggerItem gains panelId and desktopFlyout props
• Mobile (≤ 32rem): tapping a TriggerItem with panelId replaces the current card content with the target Panel (drill-down, no horizontal scroll)
• Desktop: TriggerItem with desktopFlyout internally manages a nested Menu.Root and opens the flyout on hover — existing side-by-side behaviour preserved

Visual / CSS fixes

• BpkContextMenu.Item icon moved from right to left (endIcon → icon)
• Responsive max-block-size: 7.7 items on mobile (back button + actions + 4.5 visible trips), 8.7 on desktop — both use .7 fractional for a consistent scroll indicator
• ScrollableList uses MutationObserver to keep the keyboard-highlighted item in view when arrow-navigating
• Ghost hover on menu open suppressed via a bpk-context-menu-item-hover-guard keyframe animation
• pointer-events: none on [data-state='closed'] prevents the invisible card blocking clicks during the fade-out
• All colour tokens migrated to CSS custom properties for light/dark mode

Accessibility

• BackButton and panel-mode TriggerItem wrapped in Menu.Item so Ark includes them in arrow-key navigation
• data-highlighted style applied to BackButton for keyboard visibility
• outline-offset: 0 on focus rings prevents the bottom edge bleeding out as a visible separator line

Consumer pattern

<BpkContextMenu.Root onSelect={({ value }) => handleSelect(value)}>
  <BpkContextMenu.SaveTrigger aria-label="Save to trip" />
  <BpkContextMenu.Content>
    <BpkContextMenu.PanelGroup>

      <BpkContextMenu.Panel id="root">
        <BpkContextMenu.StickyHeader>
          <BpkContextMenu.BackButton />
          <BpkContextMenu.ItemGroup>
            <BpkContextMenu.Item value="new-trip" icon={<PlusIcon />}>Plan a new trip</BpkContextMenu.Item>
          </BpkContextMenu.ItemGroup>
          <BpkContextMenu.Separator />
        </BpkContextMenu.StickyHeader>
        <BpkContextMenu.ScrollableList>
          <BpkContextMenu.ItemGroup>
            {trips.map(trip => (
              <BpkContextMenu.Item key={trip.id} value={trip.id}>{trip.name}</BpkContextMenu.Item>
            ))}
          </BpkContextMenu.ItemGroup>
        </BpkContextMenu.ScrollableList>
      </BpkContextMenu.Panel>

    </BpkContextMenu.PanelGroup>
  </BpkContextMenu.Content>
</BpkContextMenu.Root>

---

• Storybook examples
• README updated

[Copilot]

Pull request overview

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

This PR refines the Context Menu layout/styling by introducing a sticky header + scrollable list pattern, adding a mobile back button, and updating item icon placement.

Changes:

• Added StickyHeader, ScrollableList, and BackButton building blocks for long context menus.
• Updated BpkContextMenu.Item API to use a left-side icon prop instead of endIcon.
• Adjusted SCSS to support the new layout, including responsive max height and scoped scrolling.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenuStickyHeader.tsx	Adds a wrapper component to anchor header content at the top of the menu surface.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenuScrollableList.tsx	Adds a wrapper component to scope scroll behavior to just the list region.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenuItem.tsx	Changes item icon API/placement (left-side icon) and updates markup accordingly.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenuBackButton.tsx	Adds a mobile-only back button that closes the nearest menu context.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenu.tsx	Exposes the new subcomponents on the BpkContextMenu namespace.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenu.stories.tsx	Updates stories for the new icon prop and demonstrates the sticky/scrollable layout.
packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenu.module.scss	Implements responsive sizing, sticky header styling, local scrollbar, and back button styles.
packages/backpack-web/src/bpk-component-context-menu/index.ts	Exports types for the newly added components.
packages/backpack-web/src/bpk-component-context-menu/README.md	Updates docs for icon and documents new StickyHeader/BackButton APIs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[skyscanner-backpack-bot]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 6d8d586