Skip to content

feat: add device scrollbar for all preview layouts #1476

Open
itsreallythoshi wants to merge 1 commit intoresponsively-org:mainfrom
itsreallythoshi:feature/device-scrollbar
Open

feat: add device scrollbar for all preview layouts #1476
itsreallythoshi wants to merge 1 commit intoresponsively-org:mainfrom
itsreallythoshi:feature/device-scrollbar

Conversation

@itsreallythoshi
Copy link
Copy Markdown

📓 Referenced Issue

Fixes #1475

ℹ️ About the PR

Adds a collapsible device navigation bar that floats at the bottom of the
preview area for Column, Flex, and Masonry layouts.

How it works:

  • An IntersectionObserver tracks which devices are visible in the scroll container
  • All devices with >30% visibility are highlighted simultaneously
  • Clicking a thumbnail scrolls to that device (horizontal for Column, vertical for Flex/Masonry)
  • In Column layout, the carousel also supports drag-to-pan
  • The bar is collapsible via a toggle button

Design decisions:

  • Uses the app's existing slate color palette (matches Button component active states)
  • No third-party libraries added

🖼️ Testing Scenarios / Screenshots

Column layout - scrolling, multiple highlights, clicking thumbnail

Kapture 2026-03-10 at 15 59 36

Flex layout - same

Kapture 2026-03-10 at 16 12 46

Masonry layout - same

Kapture 2026-03-10 at 16 15 26

Collapse/expand the bar

Kapture 2026-03-10 at 16 18 09

Appropriate light and dark mode

Kapture 2026-03-10 at 16 20 18

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Mar 10, 2026

CLA assistant check
All committers have signed the CLA.

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.

feat: Device navigation scrollbar for all preview layouts

2 participants