From 0774090bdc2ea025fa00a871de8ed6e8e9a1c2af Mon Sep 17 00:00:00 2001
From: saltrafael <76502841+saltrafael@users.noreply.github.com>
Date: Wed, 16 Feb 2022 09:49:17 -0300
Subject: [PATCH] Remove extra scrollbar (#888)

---
 ui/component/livestreamLayout/view.jsx | 20 ++++++++++++++++++++
 ui/scss/component/_main.scss           |  6 ------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ui/component/livestreamLayout/view.jsx b/ui/component/livestreamLayout/view.jsx
index 9e28e4eb0..eac2ffc5b 100644
--- a/ui/component/livestreamLayout/view.jsx
+++ b/ui/component/livestreamLayout/view.jsx
@@ -1,6 +1,9 @@
 // @flow
 import 'scss/component/_swipeable-drawer.scss';
 
+// $FlowFixMe
+import { Global } from '@emotion/react';
+
 import { lazyImport } from 'util/lazyImport';
 import { useIsMobile } from 'effects/use-screensize';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
@@ -64,6 +67,8 @@ export default function LivestreamLayout(props: Props) {
 
   return (
     <>
+      {!isMobile && <GlobalStyles />}
+
       <div className="section card-stack">
         <React.Suspense fallback={null}>
           {isMobile && isCurrentClaimLive ? (
@@ -199,3 +204,18 @@ const ChatDrawerTitle = (titleProps: any) => {
     </div>
   );
 };
+
+const GlobalStyles = () => (
+  <Global
+    styles={{
+      body: {
+        'scrollbar-width': '0px',
+
+        '&::-webkit-scrollbar': {
+          width: '0px',
+          height: '0px',
+        },
+      },
+    }}
+  />
+);
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index bdb8d219d..46a8ec42a 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -16,7 +16,6 @@ body {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  min-height: 100vh;
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--header-height);
@@ -79,7 +78,6 @@ body {
 }
 
 .main-wrapper__inner--auth {
-  min-height: calc(100vh - var(--header-height));
   padding: 0;
 
   .main--auth-page {
@@ -95,10 +93,6 @@ body {
   margin-right: auto;
   margin-left: auto;
 
-  @media (min-width: $breakpoint-small) {
-    min-height: calc(100vh - var(--header-height));
-  }
-
   @media (max-width: $breakpoint-small) {
     width: 100%;
   }