Remove extra scrollbar (#888)

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',
+        },
+      },
+    }}
+  />
+);

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%;
   }