From c8adde735f1a16c36b4adc87602456005d8f83c3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 22 Sep 2022 17:38:00 -0500
Subject: [PATCH] ChatPage: fix height on mobile (where ThumbNavigation is
 present)

---
 .../features/chats/components/chat-page/chat-page.tsx        | 5 ++++-
 app/soapbox/pages/chats-page.tsx                             | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 74a2e01b4..062aa5b18 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -21,7 +21,10 @@ const ChatPage = () => {
     const { top } = containerRef.current.getBoundingClientRect();
     const fullHeight = document.body.offsetHeight;
 
-    setHeight(fullHeight - top);
+    // On mobile, account for bottom navigation.
+    const offset = document.body.clientWidth < 976 ? -61 : 0;
+
+    setHeight(fullHeight - top + offset);
   };
 
   useEffect(() => {
diff --git a/app/soapbox/pages/chats-page.tsx b/app/soapbox/pages/chats-page.tsx
index 08bdf078f..ae9f5d6d9 100644
--- a/app/soapbox/pages/chats-page.tsx
+++ b/app/soapbox/pages/chats-page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 /** Custom layout for chats on desktop. */
 const ChatsPage: React.FC = ({ children }) => {
   return (
-    <div className='md:col-span-12 lg:col-span-9 pb-16 sm:pb-0'>
+    <div className='md:col-span-12 lg:col-span-9'>
       {children}
     </div>
   );