From 76e01f59196df52508a9a11c5361af6bae3382b1 Mon Sep 17 00:00:00 2001
From: apple502j <33279053+apple502j@users.noreply.github.com>
Date: Tue, 8 Jan 2019 20:36:50 +0900
Subject: [PATCH 1/2] Monitors should be under navbar

Change the z-index to 99
---
 src/components/navigation/base/navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/base/navigation.scss b/src/components/navigation/base/navigation.scss
index abcc7937a..9f2b66a3c 100644
--- a/src/components/navigation/base/navigation.scss
+++ b/src/components/navigation/base/navigation.scss
@@ -5,7 +5,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 10;
+    z-index: 99;
     border-bottom: 1px solid $active-gray;
 
     box-shadow: 0 0 3px $box-shadow-gray;

From e88e669297e7d6a0a8fd073943ebd80ee5034136 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 15 Jan 2019 23:45:05 -0500
Subject: [PATCH 2/2] set the z-index of the player as a whole, to go under nav
 bar

separately set z-index in fullscreen mode, to go over other project page
UI including nav bar

correct isFullScreen prop
---
 src/components/navigation/base/navigation.scss | 2 +-
 src/views/preview/presentation.jsx             | 7 ++++++-
 src/views/preview/preview.scss                 | 5 +++++
 src/views/preview/project-view.jsx             | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/base/navigation.scss b/src/components/navigation/base/navigation.scss
index 9f2b66a3c..abcc7937a 100644
--- a/src/components/navigation/base/navigation.scss
+++ b/src/components/navigation/base/navigation.scss
@@ -5,7 +5,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 99;
+    z-index: 10;
     border-bottom: 1px solid $active-gray;
 
     box-shadow: 0 0 3px $box-shadow-gray;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index fdccd6c16..b93592f24 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -274,7 +274,12 @@ const PreviewPresentation = ({
                             </MediaQuery>
                         </FlexRow>
                         <FlexRow className="preview-row">
-                            <div className="guiPlayer">
+                            <div
+                                className={classNames(
+                                    'guiPlayer',
+                                    {fullscreen: isFullScreen}
+                                )}
+                            >
                                 {showCloudDataAlert && (
                                     <FlexRow className="project-info-alert">
                                         <FormattedMessage id="project.cloudDataAlert" />
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 9a6fce550..ae3286891 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -345,6 +345,7 @@ $stage-width: 480px;
         display: inline-block;
         position: relative;
         width: $player-width;
+        z-index: 1;
 
         $alert-bg: rgba(255, 255, 255, .85);
         .project-info-alert {
@@ -358,6 +359,10 @@ $stage-width: 480px;
             font-size: .95rem;
         }
 
+        &.fullscreen {
+            z-index: 200;
+        }
+
         @media #{$small} {
             width: 100%;
         }
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index b083d1927..7eeb3842b 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -604,7 +604,7 @@ class Preview extends React.Component {
                             extensions={this.state.extensions}
                             faved={this.state.clientFaved}
                             favoriteCount={this.state.favoriteCount}
-                            isFullScreen={this.state.isFullScreen}
+                            isFullScreen={this.props.fullScreen}
                             isLoggedIn={this.props.isLoggedIn}
                             isNewScratcher={this.props.isNewScratcher}
                             isRemixing={this.state.isRemixing}