Fix energy-only autocomplete overflow on mobile#36
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. To trigger a review, include ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
divazbozz
force-pushed
the
codex/fix-energyonly-autocomplete-overflow
branch
from
d9638c1 to
a78a1da
Compare
Change inputPositioner from position:absolute to position:fixed so it is viewport-relative and cannot push the document's scrollWidth. Update JS position calculations to use viewport-relative coords (getBoundingClientRect values directly, no scrollY/scrollX offsets) to match fixed positioning. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add min-width: 0 to energyOnlyContinueButton to override browser default min-width: min-content on buttons, and overflow: hidden to energyOnlyForm to prevent flex column children from causing horizontal page overflow. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
divazbozz
force-pushed
the
codex/fix-energyonly-autocomplete-overflow
branch
from
399b24c to
83763fa
Compare
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| overflow: hidden; | ||
| min-height: 64px; | ||
| min-width: 0; | ||
| pointer-events: none; |
There was a problem hiding this comment.
🔴 pointer-events: none on .inputContainer blocks all mouse interaction with the overlay's input and CTA button
The newly added pointer-events: none on .inputContainer (styles.module.css:73) applies to all elements with this class, including the interactive input container inside the ComboBoxOverlay portal (Autocomplete.tsx:216). Since there is no pointer-events: auto override on any child element (verified by searching the entire src/ directory), the <input>, <CtaButton>, and all other children inside the overlay's .inputContainer are completely non-interactive to mouse/touch events.
The pointer-events: none was likely intended only for the hidden positioning reference container in the Autocomplete component (Autocomplete.tsx:352, which already has visibility: "hidden"), but since both containers share the same CSS class, the overlay container is also affected.
Impact by flow
- Desktop battery flow: The widget is completely non-interactive. The only visible input is inside the overlay's
.inputContainer(pointer-events blocked), the hidden reference hasvisibility: hidden, and the mobile CTA button hasdisplay: noneon desktop. - Energy-only flow: The autocomplete input cannot be clicked at all (though
handleContinueatAutocomplete.tsx:209can programmatically focus it vialine1Ref). - All flows after activation: Users cannot click within the input to reposition the cursor or select text with the mouse.
Prompt for agents
The `pointer-events: none` on `.inputContainer` in src/address-search/styles.module.css:73 needs to be scoped so it only applies to the hidden positioning reference container in the Autocomplete component (src/address-search/Autocomplete.tsx:352), not the interactive overlay container in ComboBoxOverlay (src/address-search/Autocomplete.tsx:216). Options:
1. Move `pointer-events: none` to an inline style on the hidden reference div at Autocomplete.tsx:354, e.g. `style={{ visibility: 'hidden', pointerEvents: 'none' }}`.
2. Create a separate CSS class (e.g. `.inputContainerHidden`) for the positioning reference div that includes `pointer-events: none`, and keep `.inputContainer` interactive.
3. Add `pointer-events: auto` to the children inside the overlay's `.inputContainer` (the input and CTA button), though this is fragile.
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Summary
Testing