From 2ce39efef8a282b3e81369ad4ea7b71881ad9663 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 13 Oct 2021 17:57:26 +0700
Subject: [PATCH] fixed player position

---
 src/containers/main/BottomContainer/index.tsx     | 11 +++++------
 .../main/BottomContainer/styles.module.scss       | 15 +++++++++++----
 src/containers/main/MainLayout/index.tsx          |  1 -
 src/styles/_global.scss                           |  2 +-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/containers/main/BottomContainer/index.tsx b/src/containers/main/BottomContainer/index.tsx
index 4c13eb3f..c34e8b8b 100644
--- a/src/containers/main/BottomContainer/index.tsx
+++ b/src/containers/main/BottomContainer/index.tsx
@@ -5,17 +5,16 @@ import { selectUser } from '~/redux/auth/selectors';
 import { pick } from 'ramda';
 import { connect } from 'react-redux';
 
-const mapStateToProps = state => pick(['is_user'], selectUser(state));
+type IProps = {};
 
-type IProps = ReturnType<typeof mapStateToProps> & {};
-
-const BottomContainerUnconnected: FC<IProps> = ({ is_user }) => (
+const BottomContainer: FC<IProps> = () => (
   <div className={styles.wrap}>
     <div className={styles.content}>
-      <PlayerBar />
+      <div className={styles.padder}>
+        <PlayerBar />
+      </div>
     </div>
   </div>
 );
 
-const BottomContainer = connect(mapStateToProps)(BottomContainerUnconnected);
 export { BottomContainer };
diff --git a/src/containers/main/BottomContainer/styles.module.scss b/src/containers/main/BottomContainer/styles.module.scss
index 0e9c40d0..9a4f2c44 100644
--- a/src/containers/main/BottomContainer/styles.module.scss
+++ b/src/containers/main/BottomContainer/styles.module.scss
@@ -1,8 +1,7 @@
 @import "src/styles/variables";
 
 .wrap {
-  position: fixed;
-  transform: translateZ(0);
+  position: sticky;
   bottom: 0;
   pointer-events: none;
   touch-action: none;
@@ -13,8 +12,9 @@
   left: 0;
   align-items: center;
   justify-content: center;
-  padding: 0 $gap;
+  //padding: 0 calc(min(100vw, #{$content_width}) - 64px) 0 $gap;
   box-sizing: border-box;
+  padding: 0;
 }
 
 .content {
@@ -23,10 +23,17 @@
   height: $bar_height;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
+}
+
+.padder {
+  display: flex;
+  flex-basis: calc(min(100vw - 94px, #{$content_width}));
+  align-items: center;
   justify-content: flex-end;
 
   & > div {
     pointer-events: all;
-    touch-action: all;
+    touch-action: auto;
   }
 }
diff --git a/src/containers/main/MainLayout/index.tsx b/src/containers/main/MainLayout/index.tsx
index 36c83871..0e2e1d5b 100644
--- a/src/containers/main/MainLayout/index.tsx
+++ b/src/containers/main/MainLayout/index.tsx
@@ -6,7 +6,6 @@ export const MainLayout = ({ children }) => (
   <div className={styles.wrapper}>
     <div className={styles.content}>
       <Header />
-
       {children}
     </div>
   </div>
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 3223e55c..b64f4e08 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -37,7 +37,7 @@ body {
   min-height: 100vh;
 
   & > div {
-    min-height: 100vh;
+    //min-height: 100vh;
   }
 }