Feature: Make the on-page popup resizable

[13pathak]

User description

Hello!

I forked this project to make a small improvement. The on-page popup window was a bit too wide and wasn't resizable, which made it hard to use.

What this PR does:

Makes the on-page popup window fully resizable by the user.

Fixes the flexbox layout so that the input box stays at the bottom when resizing, instead of getting hidden.

Removes the default textarea resize handle from the input box, as the whole window is now resizable.

I've attached a GIF of the new behavior. I hope this is a useful contribution!

---

PR Type

Enhancement

---

Description

• Make on-page popup window fully resizable with drag handles

• Fix flexbox layout to keep input box visible when resizing

• Remove textarea resize handle, disable default resize behavior

• Set fixed starting height and minimum constraints for popup

• Remove dynamic window sizing logic from FloatingToolbar component

---

Diagram Walkthrough

flowchart LR
  A["Popup Container"] -->|"Add flex display"| B["Flexbox Layout"]
  B -->|"Set min-height: 0"| C["Proper Flex Shrinking"]
  D["Markdown Body"] -->|"Add flex: 1"| C
  E["Input Box"] -->|"Fixed 70px height"| F["Visible Input"]
  G["Selection Window"] -->|"Add resize: both"| H["User Resizable"]
  H -->|"Set constraints"| I["Min 350x300px"]

File Walkthrough

	Relevant files
Enhancement	styles.scss Add resizable popup with flexbox layout fixes                        src/content-script/styles.scss Add display: flex and min-height: 0 to .chatgptbox-container for proper flex behavior Change .gpt-inner from height: 100% to flex: 1 to allow flexible sizing Add flex: 1 and min-height: 0 to .markdown-body for proper flex shrinking Change .interact-input from height: 100% to fixed height: 70px with min-height: 70px Add resize: none !important to disable textarea's default resize handle Add resize: both, width: 500px, height: 450px, and size constraints to .chatgptbox-selection-window Add display: flex and flex-direction: column to .chatgptbox-selection-window +20/-3    index.jsx Remove dynamic window sizing logic                                              src/components/FloatingToolbar/index.jsx Remove import of useClampWindowSize hook Remove windowSize state calculation that dynamically sized the window Remove inline style that set width based on windowSize[0] * 0.4 Use fixed CSS class styling instead of dynamic width calculation +1/-6
Configuration changes	styles.scss Adjust popup container width                                                          src/popup/styles.scss Reduce .container-popup-mode width from 460px to 430px +1/-1

---

Summary by CodeRabbit

• New Features
  • Added a resizable chat window with drag-to-resize and draggable title bar for flexible placement and sizing.
• Style
  • Restructured chat layout for reliable flex-based sizing and overflow handling.
  • Stabilized text input with a fixed starting height and disabled resize.
  • Tweaked popup/container widths for improved visual proportions across viewports.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Removed window-size dependent width from the floating toolbar, scoped and converted content styles to flex-based/resizable behavior under a new .resizable-popup scope, and reduced popup container width from 460px to 430px.

Changes

Cohort / File(s)	Summary
Toolbar Component src/components/FloatingToolbar/index.jsx	Removed useClampWindowSize import and usage; removed inline width calculation (windowSize[0] * 0.4); chatgptbox-selection-window now relies on a static class (resizable-popup) instead of a dynamic inline width.
Content Script Styles src/content-script/styles.scss	Introduced .resizable-popup scoping; converted container elements to flex layout with flex-basis: 0, flex-grow: 1, min-height: 0; .gpt-inner and .markdown-body set to flex: 1; added .resizable-popup .chatgptbox-selection-window with width/height, resize: both, min/max constraints (min-width: 350px, min-height: 300px, max-width: 90vw, max-height: 90vh), and overflow handling; added .draggable, .dragbar, .interact-input, .submit-button, .manual-btn, and preserved pulse animations under the new scope.
Popup Styles src/popup/styles.scss	Changed .container-popup-mode width from 460px to 430px; no other structural changes observed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review points:
  • src/components/FloatingToolbar/index.jsx — confirm removal of window-size logic doesn't affect positioning or parent expectations.
  • src/content-script/styles.scss — validate flex resizing, min/max constraints, scrollbar behavior, and draggable chrome across viewports and in constrained containers.
  • src/popup/styles.scss — verify popup content layout with reduced width.

Poem

🐰 I nudged the toolbar, freed its width to play,
Wrapped boxes in flex so pixels bend and sway,
A resizable nook with a gentle dragbar,
I hop, I tweak, I polish — close and not too far,
Happy little changes, neat as carrot clay. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Feature: Make the on-page popup resizable' accurately and specifically describes the main change: adding resizable functionality to the popup window component.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist[bot]]

Summary of Changes

Hello @13pathak, I'm Gemini Code Assist[^1]! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by making the on-page popup window fully resizable. Previously, the fixed size and lack of resizing options could hinder interaction. The changes introduce dynamic sizing capabilities, coupled with crucial flexbox adjustments to maintain the correct positioning of UI elements, particularly the input box, during resizing. Additionally, the native textarea resize functionality is disabled to provide a unified resizing experience through the main popup window.

Highlights

• Resizable Popup Window: The on-page popup can now be freely resized by the user, improving usability.
• Improved Layout Stability: The flexbox layout has been adjusted to ensure the input box remains visible at the bottom of the popup, even when the window is resized.
• Disabled Textarea Resizing: The default resize handle for the input textarea has been removed, as the entire popup window now handles resizing.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with :thumbsup: and :thumbsdown: on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

[^1]: Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

[qodo-merge-pro[bot]]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided [ ] Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No auditing: The new UI behaviors (resizable/drag interactions) add user actions but there is no evidence in the added code of logging or auditing of critical actions, though these may not be considered security-critical and might be handled elsewhere. Referred Code return ( <div data-theme={config.themeMode}> <Draggable handle=".draggable" onDrag={dragEvent.onDrag} onStop={dragEvent.onStop} position={virtualPosition} > <div className="chatgptbox-selection-window"> <div className="chatgptbox-container"> Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing handlers: The new draggable/resizable UI additions do not include explicit error or boundary handling (e.g., drag/resize constraints or fallbacks), which may be acceptable for purely presentational changes but is not evident in the diff. Referred Code return ( <div data-theme={config.themeMode}> <Draggable handle=".draggable" onDrag={dragEvent.onDrag} onStop={dragEvent.onStop} position={virtualPosition} > <div className="chatgptbox-selection-window"> <div className="chatgptbox-container"> Learn more about managing compliance generic rules or creating your own custom rules
[ ] Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-merge-pro[bot]]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Ensure resize works in Firefox To ensure the resize functionality works in Firefox, change overflow: hidden to overflow: auto in the .chatgptbox-selection-window CSS rule. src/content-script/styles.scss [1455-1469] .chatgptbox-selection-window { - height: auto; border-radius: 8px; background-color: var(--theme-color); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); width: 500px; height: 450px; resize: both; - overflow: hidden; + overflow: auto; min-width: 350px; min-height: 300px; display: flex; flex-direction: column; } [ ] Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a cross-browser compatibility issue where resize: both on a div does not work in Firefox with overflow: hidden, and proposes changing it to overflow: auto to fix it, which is a critical improvement for the new resize feature.	Medium
High-level	Persist the popup's resized dimensions The popup window is now resizable, but the dimensions are not saved. Persist the window's size in local storage so it's restored when re-opened. Examples: src/content-script/styles.scss [1455-1469] .chatgptbox-selection-window { border-radius: 8px; background-color: var(--theme-color); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); width: 500px; height: 450px; resize: both; overflow: hidden; min-width: 350px; ... (clipped 5 lines) src/components/FloatingToolbar/index.jsx [93] <div className="chatgptbox-selection-window"> Solution Walkthrough: Before: // src/components/FloatingToolbar/index.jsx function FloatingToolbar(props) { // ... no size state management return ( <Draggable ...> {/* The size is controlled by CSS only */} <div className="chatgptbox-selection-window"> {/* ... content ... */} </div> </Draggable> ); } // src/content-script/styles.scss .chatgptbox-selection-window { width: 500px; height: 450px; resize: both; } After: // src/components/FloatingToolbar/index.jsx function FloatingToolbar(props) { const [size, setSize] = useState({ width: localStorage.getItem('popupWidth') || 500, height: localStorage.getItem('popupHeight') || 450, }); const windowRef = useRef(null); useEffect(() => { const resizeObserver = new ResizeObserver(entries => { const { width, height } = entries[0].contentRect; localStorage.setItem('popupWidth', width); localStorage.setItem('popupHeight', height); }); if (windowRef.current) resizeObserver.observe(windowRef.current); return () => resizeObserver.disconnect(); }, []); return ( <Draggable ...> <div ref={windowRef} className="chatgptbox-selection-window" style={{ width: size.width, height: size.height }} > {/* ... content ... */} </div> </Draggable> ); } Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a significant usability improvement by proposing to persist the window's size, which is a logical next step to complete the feature introduced in the PR.	Medium
[ ] Update