From b55ba93bfe7ace3e7d440bd8e9976d71850fc0dc Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Wed, 29 Jul 2026 16:48:15 +0200 Subject: [PATCH] Implement `useHideBottomNavOnKeyboard` hook: hide bottom nav on keyboard open for private messages, adjust layout logic, and update styles. --- web/components/nav/bottom-nav-bar.tsx | 4 ++-- web/hooks/use-hide-bottom-nav-on-keyboard.ts | 20 ++++++++++++++++++++ web/pages/messages/[channelId].tsx | 4 +++- web/styles/globals.css | 15 +++++++++++++-- 4 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 web/hooks/use-hide-bottom-nav-on-keyboard.ts diff --git a/web/components/nav/bottom-nav-bar.tsx b/web/components/nav/bottom-nav-bar.tsx index fc683ba5..20db9024 100644 --- a/web/components/nav/bottom-nav-bar.tsx +++ b/web/components/nav/bottom-nav-bar.tsx @@ -41,7 +41,7 @@ export function BottomNavBar(props: {navigationOptions: Item[]; sidebarNavigatio
` from + * the Capacitor keyboard events; the rules live in `globals.css` so showing/hiding costs no re-render. + * Zeroing `--bnv` there also reclaims the bar's height for the page below it. + */ +export const useHideBottomNavOnKeyboard = () => { + useEffect(() => { + document.body.classList.add('hide-bottom-nav') + return () => document.body.classList.remove('hide-bottom-nav') + }, []) +} diff --git a/web/pages/messages/[channelId].tsx b/web/pages/messages/[channelId].tsx index 561def6c..054d33ed 100644 --- a/web/pages/messages/[channelId].tsx +++ b/web/pages/messages/[channelId].tsx @@ -29,6 +29,7 @@ import {Avatar} from 'web/components/widgets/avatar' import {useTextEditor} from 'web/components/widgets/editor' import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator' import {BannedBadge, UserAvatarAndBadge} from 'web/components/widgets/user-link' +import {useHideBottomNavOnKeyboard} from 'web/hooks/use-hide-bottom-nav-on-keyboard' import {useIsMobile} from 'web/hooks/use-is-mobile' import { usePrivateMessages, @@ -117,6 +118,7 @@ export const PrivateChat = (props: { }) => { const {user, channel, memberIds} = props const t = useT() + useHideBottomNavOnKeyboard() const channelId = channel.channel_id const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) const isMobile = useIsMobile() @@ -436,7 +438,7 @@ export const PrivateChat = (props: { )} - +