From 778aa4df222879e682a6fa086f54761b2d6937ee Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 11 Aug 2020 13:00:36 -0300
Subject: [PATCH] :lipstick: update some styles to position: fixed

---
 client/components/mobile/FloatingNav.jsx | 2 +-
 client/components/mobile/Sidebar.jsx     | 2 +-
 client/components/useAsModal.jsx         | 2 +-
 client/utils/custom-hooks.js             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/mobile/FloatingNav.jsx b/client/components/mobile/FloatingNav.jsx
index 094a481e..de19c4ff 100644
--- a/client/components/mobile/FloatingNav.jsx
+++ b/client/components/mobile/FloatingNav.jsx
@@ -6,7 +6,7 @@ import Button from '../../common/Button';
 import IconButton from './IconButton';
 
 const FloatingContainer = styled.div`
-  position: absolute;
+  position: fixed;
   right: ${remSize(16)};
   top: ${remSize(80)};
 
diff --git a/client/components/mobile/Sidebar.jsx b/client/components/mobile/Sidebar.jsx
index cefd46bd..bc6c13ab 100644
--- a/client/components/mobile/Sidebar.jsx
+++ b/client/components/mobile/Sidebar.jsx
@@ -12,7 +12,7 @@ const SidebarWrapper = styled.div`
   height: 100%;
   width: ${remSize(180)};
 
-  position: absolute;
+  position: fixed;
   z-index: 2;
   left: 0;
 
diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
index 092550e4..350d1de2 100644
--- a/client/components/useAsModal.jsx
+++ b/client/components/useAsModal.jsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useModalBehavior } from '../utils/custom-hooks';
 
 const BackgroundOverlay = styled.div`
-  position: absolute;
+  position: fixed;
   z-index: 2;
   width: 100% !important;
   height: 100% !important;
diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js
index e289147f..a58bda41 100644
--- a/client/utils/custom-hooks.js
+++ b/client/utils/custom-hooks.js
@@ -28,7 +28,7 @@ export const useModalBehavior = (hideOverlay) => {
 
 
   const handleClickOutside = ({ target }) => {
-    if (ref && ref.current && !ref.current.contains(target)) {
+    if (ref && ref.current && !(ref.current.contains && ref.current.contains(target))) {
       hide();
     }
   };