Repository navigation
feat(ui): add draggable resize divider to resource dashboard - #1562
Merged
Merged
Conversation
Add a standalone ResizeDividerComponent (`xmc-rod-resize-divider`) between the queues list and the queue jobs pane on the Resource Observability Dashboard. The divider supports pointer dragging clamped to [20%, 80%], double-click and Enter/Space reset to 50/50, ArrowLeft/ArrowRight keyboard resizing, and WAI-ARIA separator semantics. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
There was a problem hiding this comment.
Code Review
This pull request introduces a draggable and keyboard-accessible vertical split-pane divider (ResizeDividerComponent) to allow users to dynamically resize the left and right panes of the Resource Dashboard. It includes comprehensive unit tests and a test harness for the new component. Feedback on the implementation highlights a performance issue in the drag-resize logic: calling container.getBoundingClientRect() inside the mousemove handler causes layout thrashing. It is recommended to cache the container's bounding rectangle on mousedown to ensure smooth resizing.
Address review feedback: read the container bounding rect on mousedown instead of on every mousemove, and skip starting a drag when the container has zero width. Add tests for the zero-width guard and the single rect read per drag. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
janzak-dev
commented
Nov 3, 2026
Collaborator
Author
There was a problem hiding this comment.
Addressed review feedback in commit 85231e9.
Make containerElement a required input and replace the never-bound minRatio, maxRatio, and ariaLabel inputs with constants. Drop the null-container guard, the redundant clamp on reset, and default-valued CSS declarations. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
Address self-review feedback: - Ignore non-primary mouse buttons and end the drag when the primary button is no longer held, so a lost mouseup cannot leave the divider stuck in drag mode. - Focus the divider on mousedown so keyboard resizing works after a click. - Keep the dragging state internal to the divider instead of exposing a two-way model. - Use border-box sizing on both panes so the divider tracks the cursor at every split ratio. - Give the separator a descriptive accessible name while keeping the drag tooltip. - Replace the TestBed-specific harness accessor with ElementDimensions, add drag harness helpers, and cover button filtering, keyboard bounds, focus, and aria-valuenow updates. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
Address self-review feedback: - Drive dragging with pointer events and touch-action: none so the divider can be dragged with touch and pen input; pointercancel also ends a drag. - Round aria-valuenow to whole percentages. - Let each pane scroll horizontally instead of overflowing under the divider when squeezed to the minimum split. - Assert listener removal directly in the destroy test. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
Address self-review feedback: - Ignore pointermove/pointerup/pointercancel events from pointers other than the one that started the drag. - Clip squeezed pane content with overflow-x: clip and an 8px clip margin instead of overflow-x: auto, which clipped card shadows at every split ratio. - Drop the unused clientX argument from the startDrag harness helper and add tests for pointercancel and multi-pointer input. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
Address self-review feedback: - Remove pane-level overflow clipping; the jobs table container now scrolls horizontally and the queue list header wraps, so content stays reachable at narrow splits. - Add aria-controls and aria-valuetext to the resize divider (window splitter pattern). TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
Address self-review feedback: assert that the exact drag listeners attached are removed on destroy, and cover a second pointerdown replacing an active drag. TAG=agy CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb
AntonTyb
approved these changes
Nov 3, 2026
1 task done
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a draggable, keyboard-accessible vertical resize divider (
xmc-rod-resize-divider) between the queues list and the queue jobs pane on the/resources(Resource Observability Dashboard) page.Note
This is the base PR of a two-PR stack. The
"View in full width"toggle is implemented on top of it in #1544.Motivation & Context
On the
/resourcessplit layout, the right-hand queue jobs table previously had a fixed 50% width, making wide multi-column job rows cramped on narrower viewports. A draggable splitter lets users tailor the horizontal space between the queues list and the jobs table, with a quick double-click (or keyboard) reset back to the default 50/50 split.Screencast
Drag to resize
scrolltoresize.webm
Key Changes
cmd/ui/app/resource_dashboard/components/resize_divider/):ResizeDividerComponent(xmc-rod-resize-divider) with separate TypeScript (resize_divider.ts), template (resize_divider.ng.html), and stylesheet (resize_divider.scss) files.role="separator"witharia-valuemin/aria-valuemax/aria-valuenow(rounded to whole percentages), accessible name"Resize queue list and jobs panes",aria-valuetext("Queue list N%"),aria-controlspointing at the queue list pane, and tooltip"Drag to resize sections (double-click to reset)".pointerdownon the divider plus scopedwindowpointermove/pointerup/pointercancellisteners,touch-action: none) so mouse, touch, and pen all work. Only the primary button starts a drag, events from other pointers are ignored, and listeners are detached onpointerup/pointercancel, when apointermovearrives with the primary button released, and onngOnDestroy, so a lost release (e.g. a context menu) cannot leave the divider stuck in drag mode.pointerdown(zero-width containers never enter drag mode),[20%, 80%]clamping,dblclickreset to50% / 50%, focus onpointerdown, and keyboard support (ArrowLeft/ArrowRightin 5% steps,Enter/Spacereset).containerElementandcontrolsinputs and two-waysplitRatiomodel (dragging state stays internal); subtle#dadce0idle line that highlights as a2px#1a73e8line on hover, focus, and while dragging.ResizeDividerHarness(startDrag,moveDragTo,endDrag,cancelDrag,isFocused, …) and 1-to-1 unit tests (resize_divider_test.ts) covering button filtering, lost-release recovery,pointercancel, other-pointer filtering, clamping, keyboard bounds, focus,aria-valuenowupdates, and destroy cleanup.cmd/ui/app/resource_dashboard/):<xmc-rod-resize-divider>between.rod-main-contentand.jobs-side-pane, binding the paneflex-basispercentages tosplitRatio; both panes usebox-sizing: border-boxso the divider tracks the cursor at every ratio.ResourceDashboardHarness(getResizeDivider(),getSplitContainerDimensions(), pane style accessors) andresource_dashboard_test.tswith a wiring test that drags against real layout geometry and double-click resets.cmd/ui/app/side_panel/contents/queue_jobs_table/queue_jobs_table.scss) scrolls horizontally and the queue list header (queue_list.scss) wraps.cmd/ui/screenshot_tests/resource_dashboard/resource_dashboard.screenshot.spec.ts-snapshots/).Assumptions
ArrowLeft/ArrowRight) andEnter/Spacereset on the focusedrole="separator"element — WAI-ARIAseparatorwidgets withtabindex="0"require keyboard operability alongside pointer dragging — if a finer or coarser step is preferred,KEYBOARD_RESIZE_STEP_PERCENTinresize_divider.tscan be adjusted without API impact.localStorage) can be added later if requested.Verification & Testing
cd cmd/ui && npm run lint && npm run format:check && npm test -- --watch=false --browsers=ChromeHeadlessNoSandbox && npm run build && npm run test:screenshotResizeDividerComponentand dashboard integration tests), ESLint/Prettier checks passed, 10/10 Playwright visual screenshot tests passed, and verified live on a GKE development environment.Related Issues / Bugs
N/A
TAG=agy
CONV=3c6eb5b1-7773-4304-b217-5535f5de61bb