Skip to content

fix(replay): make inspector navigation responsive - #35

Draft
lordspline wants to merge 1 commit into
masterfrom
capy/make-inspector-navigation
Draft

fix(replay): make inspector navigation responsive#35
lordspline wants to merge 1 commit into
masterfrom
capy/make-inspector-navigation

Conversation

@lordspline

@lordspline lordspline commented Aug 19, 2026

Copy link
Copy Markdown

Problem

Session replay users can lose inspector destinations and controls when a resized sidebar becomes narrower than their labels.

The top-level tabs and inspector rails overflow independently, so hidden actions lack a clear pointer or keyboard affordance.

Refs PostHog#35366

Changes

  • Switches top-level tabs to a labeled menu when the sidebar container is constrained.
  • Keeps all six available destinations visible as tabs when the sidebar is wide enough.
  • Adds explicit scroll controls to narrow filter and settings rails.
  • Adds roving keyboard selection and selected-tab auto-scroll to LemonTabs.
Before at 320 px After at 320 px
Before at 320 px After at 320 px

All six conditional destinations remain visible at a wide sidebar:

Wide sidebar

Open video

How did you test this code?

  • Added LemonTabs regressions for keyboard selection and selected-tab scrolling.
  • Ran the LemonTabs and player sidebar logic Jest suites.
  • Ran the frontend TypeScript check and hogli ci:preflight --fix.
  • Used Playwright against Storybook at 1280脳720, 1440脳900, and 1512脳982.
  • Verified 320 px and 820 px sidebars with all conditional tabs, pointer input, keyboard input, and a longer localized label.
  • The full-player story still emits unrelated 404s for missing Replay vision and shell mocks.

馃憠 Stay up-to-date with PostHog coding conventions for a smoother review.

Automatic notifications

  • Publish to changelog?

Docs update

None. This changes the layout of existing navigation without changing a documented workflow.

馃 Agent context

Autonomy: Human-driven (agent-assisted)

Capy authored the change and used Storybook plus Playwright for visual verification. It invoked /writing-ui-components, /writing-tests, /writing-user-facing-copy, /writing-code-comments, /qa-frontend, and /writing-pr-descriptions.

The experiment compared scroll-only, wrapped, and adaptive-menu concepts. The committed fixtures use existing repository mocks plus invented example.com issue data.


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant