Skip to content

web: make the trace drawer instruction-object pane resizable#255

Open
gnidan wants to merge 1 commit into
mainfrom
ui-tracedrawer-resize-footer
Open

web: make the trace drawer instruction-object pane resizable#255
gnidan wants to merge 1 commit into
mainfrom
ui-tracedrawer-resize-footer

Conversation

@gnidan

@gnidan gnidan commented Jul 14, 2026

Copy link
Copy Markdown
Member

Follow-up to the trace drawer layout work. The ethdebug/format/instruction footer pane in the trace playground drawer had a fixed height cap; this makes it user-resizable.

  • A drag handle straddles the divider above the footer, styled to match the drawer's own resize handle. It appears only while the pane is shown.
  • Dragging up grows the object pane and shrinks the instructions/state row; dragging down reverses. The instructions/state row keeps flex-filling whatever height is left, so its grow-to-fill behavior is unchanged.
  • The height replaces the previous fixed max-height and is clamped: a minimum so the pane stays usable while open, and a maximum that reserves space for the controls and the instructions/state row so the footer can't swallow the drawer. Toggling the pane off still hides it entirely.
  • Drag uses pointer capture (works for mouse and touch); the dragged height is session state, not persisted.

Display-only. Best viewed on the deploy preview: open the trace playground, enable the instruction-object pane, and drag its top edge.

Replace the instruction-object footer's fixed max-height with a
user-adjustable height. A drag handle straddles the divider above the
footer (styled to match the drawer's own resize handle); dragging up
grows the object pane and shrinks the instructions/state row, dragging
down reverses. The row keeps flex-filling whatever height is left.

The height is clamped to a minimum so the pane stays usable while open
and a maximum that reserves room for the controls and the
instructions/state row, so it can't swallow the drawer. Toggling the
pane off still hides it entirely. Drag state is per-session.
@github-actions

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://ethdebug.github.io/format/pr-preview/pr-255/

Built to branch gh-pages at 2026-07-14 02:33 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

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