From 13dff716eafc5e0c47972475b8ff6f8e9e06e224 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 30 May 2022 11:09:37 +0200
Subject: [PATCH] fix(ui): fix ui bugs

---
 frontend/app/components/Session/WebPlayer.js          | 6 +++---
 frontend/app/components/Session_/Player/Player.js     | 4 +++-
 frontend/app/components/Session_/PlayerBlock.js       | 3 ++-
 frontend/app/components/Session_/PlayerBlockHeader.js | 6 ++++--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js
index 99c423e6d..30a0926c0 100644
--- a/frontend/app/components/Session/WebPlayer.js
+++ b/frontend/app/components/Session/WebPlayer.js
@@ -27,10 +27,10 @@ const PlayerContentConnected = connectPlayer(state => ({
 }))(PlayerContent);
 
 
-function PlayerContent({ live, fullscreen }) {
+function PlayerContent({ live, fullscreen, activeTab }) {
   return (
     <div className={ cn(styles.session, 'relative') } data-fullscreen={fullscreen}>
-      <PlayerBlock />
+      <PlayerBlock activeTab={activeTab} />
     </div>
   )
 }
@@ -73,7 +73,7 @@ function WebPlayer (props) {
       <InitLoader className="flex-1">
           <PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
             <div className="flex">
-              <div className="w-full"><PlayerContentConnected fullscreen={fullscreen} live={live} /></div>
+              <div className="w-full"><PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} /></div>
               {activeTab !== '' && <ConnectedMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
             </div>
       </InitLoader>
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index 084542902..d8db7a819 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -85,8 +85,10 @@ export default class Player extends React.PureComponent {
       live,
       closedLive,
       bottomBlock,
+      activeTab
     } = this.props;
 
+    const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
     return (
       <div
         className={ cn(className, stl.playerBody, "flex flex-col relative") }
@@ -101,7 +103,7 @@ export default class Player extends React.PureComponent {
           />
         </div>
         { !fullscreen && !!bottomBlock &&
-          <div className="">
+          <div style={{ maxWidth, width: '100%' }}>
             { bottomBlock === CONSOLE &&
               <Console />
             }
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index af7143c64..9884bafbc 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -18,7 +18,7 @@ import styles from './playerBlock.css';
 }))
 export default class PlayerBlock extends React.PureComponent {
   render() {
-    const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues } = this.props;
+    const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues, activeTab } = this.props;
 
     return (
       <div className={ cn(styles.playerBlock, "flex flex-col") }>
@@ -31,6 +31,7 @@ export default class PlayerBlock extends React.PureComponent {
           bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
           bottomBlock={bottomBlock}
           fullscreen={fullscreen}
+          activeTab={activeTab}
         />
       </div>
     );
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 252df59d5..ef91909b6 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -104,9 +104,11 @@ export default class PlayerBlockHeader extends React.PureComponent {
     const TABS = [ this.props.tabs.EVENTS, this.props.tabs.HEATMAPS ].map(tab => ({ text: tab, key: tab }));
     return (
       <div className={ cn(stl.header, "flex justify-between", { "hidden" : fullscreen}) }>
-        <div className="flex w-full items-center" onClick={this.backHandler} >
+        <div className="flex w-full items-center" >
+          <div className='flex items-center h-full'  onClick={this.backHandler}>
             <BackLink label="Back" className="h-full" />
-          <div className={ stl.divider } />
+            <div className={ stl.divider } />
+          </div>
           <UserCard
             className=""
             width={width}