Fix independent panel input resizing#998
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (18)
🚧 Files skipped from review as they are similar to previous changes (16)
📝 WalkthroughWalkthroughAdds a top resize handle to ChangesInput Resize
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant ResizeHandle
participant InputBox
participant ResizeHelpers
participant Textarea
ResizeHandle->>InputBox: pointer or keyboard resize event
InputBox->>ResizeHelpers: calculate and clamp height
ResizeHelpers-->>InputBox: bounded input height
InputBox->>Textarea: apply height and resize styles
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a resizable input box feature, adding pointer and keyboard-driven resizing capabilities along with corresponding localization strings, styling, and unit tests. Feedback on the changes suggests cleaning up the unused reverseDivRef reference in InputBox and adding a hover state to the resize handle in the stylesheet to improve discoverability.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Code Review by Qodo
Context used 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a top resize handle for the input box on non-mobile platforms, allowing users to resize the input box using pointer and keyboard controls. It adds corresponding localization strings, a helper module for height calculations with unit tests, and minor layout adjustments to the conversation card. The review feedback suggests using useLayoutEffect instead of useEffect to prevent layout flickers during resizing, removing the unused reverseDivRef reference, and replacing the undefined --font-active-color CSS variable with var(--color-accent-fg) for consistent focus styles.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
cbcb30e to
d936702
Compare
There was a problem hiding this comment.
Code Review
This pull request introduces custom top-resizing functionality for the InputBox component, replacing the previous native vertical resizing logic when reverseResizeDir is active. It includes localization updates, style changes, a new helper module for calculating input height, and corresponding unit tests. The review feedback highlights opportunities to improve performance by adding a missing dependency array to a useEffect hook to prevent unnecessary layout reflows during typing, and by using the inputHeight state instead of reading offsetHeight from the DOM.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
Code review by qodo was updated up to the latest commit d936702 |
d936702 to
c128aea
Compare
There was a problem hiding this comment.
Code Review
This pull request replaces the CSS-based vertical resizing of the input box with a custom, accessible resizing mechanism using pointer and keyboard events. It introduces a new helper module (resize.mjs) with corresponding unit tests, updates localizations across multiple languages, and styles the new resize handle. The review feedback highlights that the CSS variable --font-active-color used for the hover and focus states of the resize handle is undefined, which could lead to accessibility issues, and suggests using an existing variable like --font-color instead.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
Code review by qodo was updated up to the latest commit c128aea |
PR Summary by QodoFix independent conversation input resizing with pointer/keyboard separator
AI Description
Diagram
High-Level Assessment
Files changed (18)
|
Code Review SummaryStatus: No New Issues Found | Recommendation: Address existing review comments before merge The changed code (pointer/keyboard-driven input resize handle, Already-covered issues (no duplicates posted)
Files Reviewed (18 files)
Previous Review Summary (commit c128aea)Current summary above is authoritative. Previous snapshots are kept for context only. Previous review (commit c128aea)Status: No New Issues Found | Recommendation: Address existing review comments before merge The changed code (pointer/keyboard-driven input resize handle, Already-covered issues (no duplicates posted)
Files Reviewed (18 files)
Reviewed by hy3:free · Input: 66.9K · Output: 7.6K · Cached: 277.5K |
There was a problem hiding this comment.
Pull request overview
This PR fixes input resizing on the desktop Independent Panel by replacing the prior transform-based native resize workaround with a dedicated, pointer-driven separator (with pointer capture) and keyboard resizing support, while keeping non-independent/mobile behavior unchanged.
Changes:
- Add pointer + keyboard resizing logic for the Independent Panel input area, including bounds recalculation on window resize.
- Introduce shared resize helper utilities with unit tests.
- Add styling for the new resize handle and minor layout adjustment to keep the conversation pane flexing correctly; localize the new accessible label.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/unit/components/input-box-resize.test.mjs | Adds unit coverage for pointer/keyboard resize calculations and clamping behavior. |
| src/content-script/styles.scss | Adds styles for the new separator handle and a wrapper class for the resizable input region. |
| src/components/InputBox/resize.mjs | Introduces shared constants + helper functions for clamping and computing resized heights. |
| src/components/InputBox/index.jsx | Implements the separator-driven resizing (pointer capture + keyboard), window-resize bound recalculation, and ARIA labeling. |
| src/components/ConversationCard/index.jsx | Ensures the conversation pane can shrink in flex layout (minHeight: 0) when unclamped (Independent Panel). |
| src/_locales/en/main.json | Adds localized string for the separator label (“Resize input box”). |
| src/_locales/de/main.json | Adds localized string for the separator label. |
| src/_locales/es/main.json | Adds localized string for the separator label. |
| src/_locales/fr/main.json | Adds localized string for the separator label. |
| src/_locales/in/main.json | Adds localized string for the separator label. |
| src/_locales/it/main.json | Adds localized string for the separator label. |
| src/_locales/ja/main.json | Adds localized string for the separator label. |
| src/_locales/ko/main.json | Adds localized string for the separator label. |
| src/_locales/pt/main.json | Adds localized string for the separator label. |
| src/_locales/ru/main.json | Adds localized string for the separator label. |
| src/_locales/tr/main.json | Adds localized string for the separator label. |
| src/_locales/zh-hans/main.json | Adds localized string for the separator label. |
| src/_locales/zh-hant/main.json | Adds localized string for the separator label. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Code review by qodo was updated up to the latest commit c128aea |
Replace the browser-specific transformed resize handle with an accessible pointer-driven separator so Firefox can adjust the input area from its top edge. Clamp the input height to keep the conversation pane usable, preserve native resizing outside the independent panel, and cover the shared resize calculations with unit tests.
c128aea to
0d5c5f8
Compare
There was a problem hiding this comment.
Code Review
This pull request introduces a resizable input box feature, allowing users to adjust the input height using pointer or keyboard controls. It includes localization updates, styling adjustments, and unit tests for the resize helper functions. The review feedback suggests adding defensive checks for inputRef.current to prevent potential null pointer exceptions, utilizing a ResizeObserver instead of a window resize listener for more robust layout handling, and providing a fallback for the --font-active-color CSS variable to ensure proper styling and accessibility.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
Code review by qodo was updated up to the latest commit 0d5c5f8 |
Summary
Root cause
The independent page requested a reversed native resize direction so users could drag the input area's top edge. The implementation achieved that by rotating a resizable wrapper and its textarea by 180 degrees, but explicitly disabled the workaround in Firefox because it did not behave correctly there. Firefox consequently fell back to a bottom-edge native handle inside a full-height, overflow-hidden panel, making the boundary impractical to resize.
This change removes the browser-specific transform workaround from the desktop independent page and uses Pointer Events with pointer capture instead.
User impact
Firefox users can resize the boundary between the conversation and input areas by dragging the visible separator. Chromium and desktop Safari use the same interaction, while mobile and non-independent conversation cards keep their existing behavior.
Related: #266
Summary by CodeRabbit