Bottom nav uses fixed position to fix firefox bug (#1011)

* use fixed position + div placeholder

* hide footer padding when not shown

* account for mobile inset

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>

components/footer.module.css

@@ -25,4 +25,4 @@
     font-size: 75%;
     margin-top: .15rem;
     color: var(--theme-grey) !important;
-}
+}

components/nav/mobile/footer.js

@@ -47,16 +47,19 @@ export default function BottomBar ({ sub }) {
   }
 
   return (
-    <div className={classNames('d-block d-md-none', styles.footer, styles.footerPadding)}>
+    <nav className='d-block d-md-none'>
-      <Navbar className='container px-0'>
+      <div style={{ marginBottom: '53px' }} className={styles.footerPadding} />
-        <Nav className={styles.footerNav}>
+      <div className={classNames(styles.footer, styles.footerPadding)}>
-          <Offcanvas me={me} {...props} />
+        <Navbar className='container px-0'>
-          <SearchItem {...props} />
+          <Nav className={styles.footerNav}>
-          <Brand />
+            <Offcanvas me={me} {...props} />
-          <NavNotifications />
+            <SearchItem {...props} />
-          <PostItem {...props} className='btn-sm' />
+            <Brand />
-        </Nav>
+            <NavNotifications />
-      </Navbar>
+            <PostItem {...props} className='btn-sm' />
-    </div>
+          </Nav>
+        </Navbar>
+      </div>
+    </nav>
   )
 }

components/nav/mobile/footer.module.css

@@ -1,12 +1,11 @@
 
 .footer {
-    position: sticky;
+    position: fixed;
     bottom: 0;
     width: 100%;
     background-color: var(--bs-body-bg);
     border-top: 1px solid var(--theme-toolbarActive);
     z-index: 1000;
-    justify-content: end;
 }
 
 .footerPadding {

components/nav/mobile/offcanvas.js

@@ -22,9 +22,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
         src={me?.photoId ? `${MEDIA_URL}/${me.photoId}` : '/dorian400.jpg'} width='28' height='28'
         style={{ clipPath: 'polygon(0 0, 83% 0, 100% 100%, 17% 100%)' }}
         onClick={onClick}
+        className='pointer'
       />
       )
-    : <span className='text-muted'><AnonIcon onClick={onClick} width='22' height='22' /></span>
+    : <span className='text-muted pointer'><AnonIcon onClick={onClick} width='22' height='22' /></span>
 
   return (
     <>