EPMRPP-117702 || Resize of blocks on Remote device tab - #37
EPMRPP-117702 || Resize of blocks on Remote device tab#37VaheSamsonyan wants to merge 2 commits into
Conversation
|
Warning Review limit reached
Next review available in: 41 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughThe remote device tab now uses a draggable splitter between the video list and preview panels. Pointer movement updates the left panel width while CSS provides constrained sizing, dragging behavior, and splitter visuals. ChangesRemote device panel resizing
Sequence Diagram(s)sequenceDiagram
participant User
participant Splitter
participant RemoteDeviceTab
participant Panels
User->>Splitter: Drag splitter
Splitter->>RemoteDeviceTab: Send pointer movement
RemoteDeviceTab->>RemoteDeviceTab: Calculate constrained left width
RemoteDeviceTab->>Panels: Apply updated flex basis
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
ui/src/components/remoteDeviceTab/remoteDeviceTab.scss (1)
45-82: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSplitter has no focus-visible style, consistent with missing keyboard support.
If keyboard operability is added to the splitter (see
remoteDeviceTab.tsxLines 184-191), this rule set will also need a:focus-visiblestyle since none exists today.Separately, the grip dots at Lines 58-81 use raw
rgb(153, 153, 153)while the splitter face line (Line 53-54) and the rest of the file use design tokens likevar(--rp-ui-base-e-91). This is inconsistent and likely won't track theme changes (e.g. dark mode) the way the rest of the component does.🎨 Suggested token usage
&::before { content: ''; position: absolute; top: 15px; left: 50%; width: 1px; height: 23px; - background: rgb(153, 153, 153); + background: var(--rp-ui-base-e-91); transform: translateX(-50%); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.scss` around lines 45 - 82, Update the .columns-splitter styles to add a clear :focus-visible state for keyboard interaction, and replace the raw rgb(153, 153, 153) values in its ::before and ::after grip styling with the appropriate existing design token used by the splitter and surrounding component styles.ui/src/components/remoteDeviceTab/remoteDeviceTab.tsx (1)
184-191: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winMake the column splitter keyboard operable.
This
separatoris only mouse-driven; it has no focus/keyboard support or resize state announced to assistive tech. Make it focusable, add arrow-key resizing, and expose a value/range such asaria-valuenow/aria-valuemin/aria-valuemax/aria-orientationso keyboard users can resize the panels.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.tsx` around lines 184 - 191, Update the columns-splitter element and its associated splitter handlers to support keyboard operation: make the separator focusable, handle horizontal arrow keys to adjust the column size using the existing resize state/update path, and expose the current value plus minimum, maximum, and horizontal orientation through the appropriate ARIA attributes. Keep pointer resizing behavior unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.scss`:
- Around line 33-43: Update the flex sizing for .left-panel and .right-panel so
their combined minimum widths remain compatible with .columns when the drag
logic assigns a fixed pixel flexBasis. Remove the left panel’s non-shrinking
behavior and adjust the relevant minimum-width constraints, coordinating with
the drag sizing logic in remoteDeviceTab.tsx rather than adding unrelated
changes.
In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.tsx`:
- Around line 165-208: Update the remote device columns sizing flow around
columnsRef, leftWidthPx, and the splitter handlers so a previously dragged
left-panel width is reclamped whenever the container shrinks, including browser
resize. Observe or otherwise respond to columnsRef size changes, cap the stored
width to the available container width while preserving the right-panel minimum,
and ensure the inline flex sizing does not retain a stale width that causes
overflow.
- Around line 138-146: Update handleSplitterPointerDown to proceed only for the
primary pointer/button interaction; return before preventDefault, drag state
updates, and pointer capture for right-click, middle-click, or non-primary
pointers, while preserving the existing drag initialization for valid primary
interactions.
- Around line 148-161: Reset dragging state when pointer capture is lost by
adding a handleSplitterLostPointerCapture callback near handleSplitterPointerUp
that clears isDragging, then wire it to the splitter div via
onLostPointerCapture. Preserve the existing pointer-up release behavior.
---
Nitpick comments:
In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.scss`:
- Around line 45-82: Update the .columns-splitter styles to add a clear
:focus-visible state for keyboard interaction, and replace the raw rgb(153, 153,
153) values in its ::before and ::after grip styling with the appropriate
existing design token used by the splitter and surrounding component styles.
In `@ui/src/components/remoteDeviceTab/remoteDeviceTab.tsx`:
- Around line 184-191: Update the columns-splitter element and its associated
splitter handlers to support keyboard operation: make the separator focusable,
handle horizontal arrow keys to adjust the column size using the existing resize
state/update path, and expose the current value plus minimum, maximum, and
horizontal orientation through the appropriate ARIA attributes. Keep pointer
resizing behavior unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: fc6aa5db-050f-47bf-9bdc-d38962eebd71
📒 Files selected for processing (2)
ui/src/components/remoteDeviceTab/remoteDeviceTab.scssui/src/components/remoteDeviceTab/remoteDeviceTab.tsx
1 participant
Description
added resizing opportunity for remote device tab
Visuals
splitter.mp4
Summary by CodeRabbit