fixed player position

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

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

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>

src/styles/_global.scss

@@ -37,7 +37,7 @@ body {
   min-height: 100vh;
 
   & > div {
-    min-height: 100vh;
+    //min-height: 100vh;
   }
 }