Fix iPad keyboard toolbar overlay handling

[2witstudios]

Summary

Improved handling of iPad's external keyboard toolbar to prevent unnecessary UI shrinking while maintaining proper keyboard support for full on-screen keyboards.

Key Changes

• useIOSKeyboardInit.ts: Added detection for iPad's external keyboard toolbar (< 100px height) to distinguish it from full on-screen keyboards. The toolbar now overlays naturally without triggering keyboard-open state or shrinking the UI.
• InputPositioner.tsx: Added a background fill element behind the safe area that extends behind the iPad keyboard toolbar, ensuring visual continuity when the UI extends behind the toolbar.
• globals.css: Set explicit background color on the html element to ensure consistent background rendering across the entire viewport.

Implementation Details

• The external keyboard toolbar detection uses a 100px height threshold, as iPad toolbars are typically ~55px while full keyboards are 300+px
• The background fill div uses CSS custom property --safe-bottom-offset for flexible height configuration
• The fill element is only rendered when content is not centered, maintaining layout consistency
• All changes maintain backward compatibility with existing keyboard handling for standard on-screen keyboards

https://claude.ai/code/session_01UBHund2513D3bvW2pjqLXo

Summary by CodeRabbit

• Bug Fixes
  • Improved visual rendering of input areas when using keyboard on iOS devices
  • Enhanced handling of external iPad keyboard toolbars to prevent unwanted UI adjustments
  • Updated global background color styling for consistency

[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

These changes enhance iOS keyboard interaction and visual presentation by adding a CSS background variable to the root element, conditionally rendering a background filler element in the floating input when docked, and implementing conditional keyboard detection logic to differentiate between native keyboards and external iPad toolbars.

Changes

Cohort / File(s)	Summary
Global Styling apps/web/src/app/globals.css	Added explicit background-color using CSS variable to html element in base layer.
Floating Input UI apps/web/src/components/ui/floating-input/InputPositioner.tsx	Added aria-hidden background filler element that renders when input is docked (not centered), positioned at bottom with full width and height tied to --safe-bottom-offset CSS variable.
Keyboard Detection Logic apps/web/src/hooks/useIOSKeyboardInit.ts	Modified keyboardWillShow handler to conditionally check keyboard height; if less than 100px (external iPad toolbar), sets --keyboard-height to 0px and skips keyboard-open class application; otherwise preserves previous behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix(mobile): fix input positioning with keyboard in Capacitor app #291: Modifies InputPositioner.tsx keyboard handling and docking behavior, directly affecting the same floating input component modified in this PR.
• fix(ios): improve mobile keyboard UX and touch interactions #250: Changes keyboard handling and InputPositioner styling/CSS variables, overlapping the same UI surface affected by these changes.
• Add z-index to welcome content overlay in chat layout #304: Addresses z-index layering on the welcome overlay component, related to the visual layering concerns introduced by the new background filler element in InputPositioner.

Poem

🐰 A keyboard's height now we discern,
With iPad toolbars we don't concern,
The input floats with grace so true,
Background fillers, fresh and new,
iOS dances in iOS blue! 🎉

🚥 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 title 'Fix iPad keyboard toolbar overlay handling' accurately and specifically summarizes the main change—addressing iPad external keyboard toolbar overlay issues—which is the central purpose of all three file modifications.
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-ipad-safe-zone-1eQOM

---

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