diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 429e21ab..d259cfee 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -32,7 +32,7 @@ export default function Sidebar(props: {
     <nav
       aria-label="Sidebar"
       className={clsx(
-        'flex h-screen flex-col h-full max-h-screen overflow-y-auto mb-[calc(env(safe-area-inset-bottom))] mt-[calc(env(safe-area-inset-top))]',
+        'flex h-screen flex-col h-full max-h-screen overflow-y-auto safe-bottom mt-[calc(env(safe-area-inset-top))]',
         className
       )}
     >
@@ -56,7 +56,7 @@ export default function Sidebar(props: {
           </Button>
         )}
       </div>
-      <div className="mb-6 mt-auto flex flex-col gap-1">
+      <div className="mb-[calc(24px+env(safe-area-inset-bottom))] mt-auto flex flex-col gap-1">
         {bottomNavOptions.map((item) => (
           <SidebarItem key={item.name} item={item} currentPage={currentPage}/>
         ))}
diff --git a/web/pages/messages/[channelId].tsx b/web/pages/messages/[channelId].tsx
index fad3f1a8..e880d373 100644
--- a/web/pages/messages/[channelId].tsx
+++ b/web/pages/messages/[channelId].tsx
@@ -294,7 +294,7 @@ export const PrivateChat = (props: {
           </Modal>
         )}
       </Row>
-      <Col className="relative h-[calc(100dvh-213px)]  lg:h-[calc(100dvh-184px)] xl:px-0">
+      <Col className="relative h-[calc(100dvh-213px-env(safe-area-inset-bottom))]  lg:h-[calc(100dvh-184px)] xl:px-0">
         <div
           ref={outerDiv}
           className="relative h-full overflow-y-auto"