From 468c896ce01f271211ed8a1b462867e07079cf9d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 26 Aug 2022 12:47:04 +0200
Subject: [PATCH] fix(ui) - player width on fullscreen

---
 .../app/components/Session/Layout/Layout.js   | 57 +++++++++----------
 frontend/app/components/Session/WebPlayer.js  |  2 +-
 .../Player/Controls/controls.module.css       |  2 +-
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/frontend/app/components/Session/Layout/Layout.js b/frontend/app/components/Session/Layout/Layout.js
index eafcbac56..ba47d7173 100644
--- a/frontend/app/components/Session/Layout/Layout.js
+++ b/frontend/app/components/Session/Layout/Layout.js
@@ -1,41 +1,36 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { useCallback } from 'react';
-import { EscapeButton, Loader } from 'UI';
+import { EscapeButton } from 'UI';
 
 import Header from './Header';
-import ToolPanel from'./ToolPanel';
-import Events from './Events';
+import ToolPanel from './ToolPanel';
 import PlayOverlay from './PlayOverlay';
 import Controls from './Player/Controls';
 
-
 function Layout({ children, player, toolbar }) {
-	return (
-		<div className="flex flex-col h-screen">
-			{ !player.fullscreen.enabled && <Header player={player} /> }
-			<div className="flex-1 flex">
-				<div className="flex flex-col" style={{ width: player.fullscreen.enabled ? "100vw" : "calc(100vw - 270px)" }}>
-					<div
-			      className="flex-1 flex flex-col relative bg-white border-gray-light"
-			    >
-			      { player.fullscreen.enabled && 
-			        <EscapeButton onClose={ player.toggleFullscreen } />
-			      }
-			      <div className="flex-1 relative overflow-hidden" >
-			        {/* <Loader loading={ player.loading }> */}
-			        	{ children }
-			        {/* </Loader>  */}
-			        <PlayOverlay player={player} />
-			      </div>
-			      <Controls player={ player } toolbar={ toolbar } />
-			    </div>
-					{ !player.fullscreen.enabled && <ToolPanel player={ player } toolbar={ toolbar }/> }
-				</div>
-			
-			</div>
-		</div>
-	);
+  return (
+    <div className="flex flex-col h-screen">
+      {!player.fullscreen.enabled && <Header player={player} />}
+      <div className="flex-1 flex">
+        <div
+          className="flex flex-col"
+        //   style={{ width: player.fullscreen.enabled ? '100vw' : 'calc(100vw - 270px)' }}
+        >
+          <div className="flex-1 flex flex-col relative bg-white border-gray-light">
+            {player.fullscreen.enabled && <EscapeButton onClose={player.toggleFullscreen} />}
+            <div className="flex-1 relative overflow-hidden">
+              {/* <Loader loading={ player.loading }> */}
+              {children}
+              {/* </Loader>  */}
+              <PlayOverlay player={player} />
+            </div>
+            <Controls player={player} toolbar={toolbar} />
+          </div>
+          {!player.fullscreen.enabled && <ToolPanel player={player} toolbar={toolbar} />}
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default observer(Layout);
\ No newline at end of file
+export default observer(Layout);
diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js
index cef4d4bae..b5b1f86af 100644
--- a/frontend/app/components/Session/WebPlayer.js
+++ b/frontend/app/components/Session/WebPlayer.js
@@ -44,7 +44,7 @@ function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, has
                 </div>
             ) : (
                 <div className={cn('flex', { 'pointer-events-none': hasError })}>
-                    <div className="w-full" style={activeTab ? { maxWidth: 'calc(100% - 270px)'} : undefined}>
+                    <div className="w-full" style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)'} : undefined}>
                         <div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
                             <PlayerBlock activeTab={activeTab} />
                         </div>
diff --git a/frontend/app/components/Session_/Player/Controls/controls.module.css b/frontend/app/components/Session_/Player/Controls/controls.module.css
index 6be3ab2c2..c27cb74da 100644
--- a/frontend/app/components/Session_/Player/Controls/controls.module.css
+++ b/frontend/app/components/Session_/Player/Controls/controls.module.css
@@ -54,7 +54,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 13px;
   color: $gray-darkest;
   background-color: $gray-lightest;
   padding: 0 10px;