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: {
)}
-
+