fix(mobile): fix input positioning with keyboard in Capacitor app

[2witstudios]

• Fix InputPositioner centered-to-docked transition when keyboard is open
  by always anchoring to bottom and using transforms instead of
  animating between 'top' and 'bottom' properties (which Framer Motion
  can't interpolate with 'auto' values)
• When keyboard is open, force docked position to prevent animation issues
• Fix right sidebar AI chat input getting hidden behind keyboard by adding
  keyboard height padding to the input container
• Adjust RightPanel height for overlay/Sheet variant when keyboard is open
• Remove bottom safe area padding when keyboard covers the home indicator

https://claude.ai/code/session_01MZgZvRebjQjjN23duiJr7h

Summary by CodeRabbit

• New Features
  • Mobile keyboard-aware layout adjustments that dynamically position input areas and adjust spacing when on-screen keyboard appears for improved accessibility
  • Responsive positioning and height handling for optimized mobile experience during typing
  • Enhanced UI responsiveness across chat interface and floating input components on mobile devices

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change integrates mobile keyboard detection across the chat UI and input positioning system. Three components now import and use the useMobileKeyboard hook to dynamically adjust layout—adding conditional padding and height calculations when the on-screen keyboard is open, and refactoring the input positioner from static variants to dynamic animation-driven behavior.

Changes

Cohort / File(s)	Summary
Mobile Keyboard Integration in Chat Components apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarChatTab.tsx, apps/web/src/components/layout/right-sidebar/index.tsx	Integrated useMobileKeyboard hook to detect keyboard state and height. SidebarChatTab adds dynamic bottom padding to the input area; RightPanel introduces an optional variant prop and conditionally adjusts height based on keyboard open state when variant is "overlay".
Dynamic Input Positioner apps/web/src/components/ui/floating-input/InputPositioner.tsx	Replaced static Framer Motion variants-based positioning with computed animation logic. Now uses useMobileKeyboard to force docking when keyboard is open, computes vertical animation based on centered vs. docked state, and adjusts padding to accommodate safe-area offsets and keyboard height.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat(ai): add floating chat input with centered-to-docked animation #95: Introduces keyboard-aware positioning to the same SidebarChatTab and floating input components, directly preceding or related to these keyboard-aware adjustments.
• fix(ios): improve mobile keyboard UX and touch interactions #250: Implements the useMobileKeyboard hook and similar keyboard-aware layout changes across InputPositioner and sidebar chat UI.
• Fix right sidebar text and tool call rendering #177: Modifies SidebarChatTab layout with padding and container positioning adjustments that intersect with the keyboard-aware padding logic introduced here.

Poem

🐰 Hop skip, keyboards now align,
Mobile padding, responsive design,
InputPositioner dances with grace,
Floating inputs find their place!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately describes the main focus of the changes: fixing input positioning issues with the mobile keyboard in a Capacitor app.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-mobile-input-positioning-yijMx

---

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.}