Skip to content

feat(inspector): resizable panes, arrow-key row navigation, sticky raw attributes and favicon - #329

Merged
gmegidish merged 1 commit into
mainfrom
feat/inspector-resizable-panes
Sep 18, 2026
Merged

gmegidish merged 1 commit into
mainfrom
feat/inspector-resizable-panes

Conversation

@gmegidish

@gmegidish gmegidish commented Sep 18, 2026

Copy link
Copy Markdown
Member

Summary

  • Resizable panes: draggable splitters between the device pane, the elements list and the detail pane. col-resize cursor, accent highlight on hover/drag, ←/→ when focused, widths persisted in localStorage. Clamped by CSS min/max-width; splitters are hidden in the stacked layout below 900px.
  • Overlay tracking: the screenshot pane uses a ResizeObserver instead of a window resize listener, so element highlights follow the screenshot while dragging.
  • Arrow-key navigation: ↑/↓ move the selection between element rows. Focus follows selection, so it also works after clicking an element on the screenshot.
  • Sticky Raw Attributes: the expanded/collapsed state survives selecting another row.
  • Favicon: same icon as mobilewright.dev, served as /favicon.ico.

Test plan

  • npm run lint
  • Simulated splitter drags and keyboard resize in Chrome against the static page
  • Drag both splitters with a real device screenshot loaded; highlights stay aligned
  • Reload: pane widths are restored
  • Open Raw Attributes, click another row: stays open
  • Click a row or screenshot element, press ↑/↓: selection moves and scrolls into view
  • Favicon shows in the browser tab

@coderabbitai

coderabbitai Bot commented Sep 18, 2026

Copy link
Copy Markdown

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 9d31f3d8-b76e-42c0-926d-e2e787b06c16

📥 Commits

Reviewing files that changed from the base of the PR and between 2cd27c9 and e534a8c.

⛔ Files ignored due to path filters (1)
  • packages/inspector/public/favicon.ico is excluded by !**/*.ico
📒 Files selected for processing (3)
  • packages/inspector/public/css/app.css
  • packages/inspector/public/index.html
  • packages/inspector/public/js/app.js
 ______________________________________________________________________
< Race conditions: you *caught* one. Unfortunately you released three. >
 ----------------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

Comment @coderabbitai help to get the list of available commands.

@gmegidish
gmegidish merged commit cfd8ad8 into main Sep 18, 2026
8 of 9 checks passed
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