diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index d189e490..728776c9 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -59,14 +59,14 @@ function MobileFilters(props: {
   )
 
   return (
-    <Col className="mb-4">
-      <div
-        // className="fixed inset-x-0 bg-canvas-50"
-        style={{
-          // bottom: 0,
-          height: 'env(safe-area-inset-top)',
-        }}
-      />
+    <Col className="mb-[calc(20px+env(safe-area-inset-bottom))] mt-[calc(20px+env(safe-area-inset-top))]">
+      {/*<div*/}
+      {/*  // className="fixed inset-x-0 bg-canvas-50"*/}
+      {/*  style={{*/}
+      {/*    // bottom: 0,*/}
+      {/*    height: 'env(safe-area-inset-top)',*/}
+      {/*  }}*/}
+      {/*/>*/}
       <Row>
         <Col className="p-4 pb-2">
           <MyMatchesToggle
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 28a6e0fc..429e21ab 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -31,7 +31,10 @@ export default function Sidebar(props: {
   return (
     <nav
       aria-label="Sidebar"
-      className={clsx('flex h-screen flex-col h-full max-h-screen overflow-y-auto', className)}
+      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))]',
+        className
+      )}
     >
       <SiteLogo/>