Fix zen mode sizes

Fixes codesandbox#546

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/FilePath/elements.js

@@ -47,21 +47,15 @@ export const StyledExitZen = withTooltip(
   styled(ExitZen)`
     transition: 0.3s ease opacity;
 
-    opacity: 0;
     cursor: pointer;
     font-size: 1.25rem;
 
     z-index: 10;
+    opacity: 0.7;
 
-    ${props =>
-      props.hovering === 'true' &&
-      css`
-        opacity: 0.7;
-
-        &:hover {
-          opacity: 1;
-        }
-      `};
+    &:hover {
+      opacity: 1;
+    }
   `,
   { title: 'Close Zen Mode', style: { zIndex: 10 } }
 );

packages/app/src/app/components/CodeEditor/FilePath/index.js

@@ -60,10 +60,7 @@ export default class FilePath extends React.Component {
           </span>
         </FileName>
 
-        <StyledExitZen
-          hovering={String(this.state.hovering)}
-          onClick={exitZenMode}
-        />
+        <StyledExitZen onClick={exitZenMode} />
       </Container>
     );
   }

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -298,7 +298,7 @@ class EditorPreview extends React.Component<Props, State> {
               position: 'relative',
               display: 'flex',
               flex: 1,
-              marginTop: '2.5rem',
+              marginTop: preferences.settings.zenMode ? 0 : '2.5rem',
             }}
           >
             <CodeEditor