🐛 Mobile: Bottom navigation doesn't hide when chat input is focused

[namastex888]

Bug Description

On mobile devices, when the user taps into the chat input box, the bottom navigation menu remains visible instead of hiding to make room for the keyboard. This blocks content and creates a poor UX.

Expected behavior: Bottom navigation should hide when input is focused, and reappear when focus is lost.

Actual behavior: Navigation stays visible at all times.

Root Causes

1. No keyboard visibility detection in mobile layout
2. isTextareaFocused state in TaskFollowUpSection isn't used to control navigation visibility
3. BottomNavigation component always renders when showBottomNav prop is true
4. No event listeners to detect input focus/blur at the layout level

Affected Components

• frontend/src/components/mobile/MobileLayout.tsx
• frontend/src/components/mobile/BottomNavigation.tsx
• frontend/src/components/tasks/TaskFollowUpSection.tsx
• frontend/src/pages/project-tasks.tsx

Proposed Solution

1. Add keyboard visibility state to MobileLayout
2. Hide BottomNavigation when input is focused
3. Use CSS transitions for smooth hide/show animations
4. Consider using visualViewport API for accurate keyboard detection

Screenshot

Priority

Medium-High - Affects mobile UX significantly

Labels

mobile, bug, UX

[namastex888]

@codex cn you confirm this bug is fixed?

[chatgpt-codex-connector[bot]]

Summary

• Added keyboard and focus detection in MobileLayout so the bottom navigation hides while inputs are active and spacing is released, preventing the keyboard from being obstructed on mobile. frontend/src/components/mobile/MobileLayout.tsxL32-L226
• Updated BottomNavigation to accept controlled visibility with smooth transitions and disabled interactions when hidden. frontend/src/components/mobile/BottomNavigation.tsxL19-L105

Testing

• ❌ npm run frontend:lint (fails because existing ESLint warnings exceed the configured limit).

View task →