Fix safari 10 styling (codesandbox#566)

* Fix safari styling

* Show tabs in embed

Author: CompuIves

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

@@ -131,7 +131,11 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
         style={{
           height: props.height || '100%',
           width: props.width || '100%',
-          position: 'relative',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
         }}
       >
         {config &&

packages/app/src/app/pages/Sandbox/Editor/OwnedSandbox.js

@@ -68,6 +68,9 @@ function ContentSplit({ signals, store, match }) {
                   : 'hidden',
                 maxWidth: store.workspace.openedWorkspaceItem ? 'inherit' : 0,
               }}
+              pane2Style={{
+                height: '100%',
+              }}
             >
               {store.workspace.openedWorkspaceItem && <Workspace />}
               <Content match={match} />

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

@@ -342,18 +342,21 @@ export default class Content extends React.PureComponent<Props, State> {
                 );
               })}
             </Tabs>
-
-            <CodeEditor
-              onInitialized={this.onCodeEditorInitialized}
-              currentModule={currentModule || mainModule}
-              sandbox={sandbox}
-              settings={this.getPreferences()}
-              canSave={false}
-              onChange={this.setCode}
-              onModuleChange={this.setCurrentModule}
-              onUnMount={this.onCodeEditorUnMount}
-              highlightedLines={this.props.highlightedLines}
-            />
+            <div
+              style={{ position: 'relative', width: '100%', height: '100%' }}
+            >
+              <CodeEditor
+                onInitialized={this.onCodeEditorInitialized}
+                currentModule={currentModule || mainModule}
+                sandbox={sandbox}
+                settings={this.getPreferences()}
+                canSave={false}
+                onChange={this.setCode}
+                onModuleChange={this.setCurrentModule}
+                onUnMount={this.onCodeEditorUnMount}
+                highlightedLines={this.props.highlightedLines}
+              />
+            </div>
           </Split>
         )}