fix: editor resize (#39542)

client/src/components/layouts/variables.css

@@ -22,6 +22,8 @@
   --red-dark: #850000;
   --love-light: #f8577c;
   --love-dark: #f82153;
+  --editor-background-light: #fffffe;
+  --editor-background-dark: #2a2b40;
 }
 
 .dark-palette {
@@ -40,6 +42,7 @@
   --danger-color: var(--red-light);
   --danger-background: var(--red-dark);
   --love-color: var(--love-light);
+  --editor-background: var(--editor-background-dark);
 }
 
 .light-palette {
@@ -58,4 +61,5 @@
   --danger-color: var(--red-dark);
   --danger-background: var(--red-light);
   --love-color: var(--love-dark);
+  --editor-background: var(--editor-background-light);
 }

client/src/templates/Challenges/classic/Editor.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -15,6 +15,7 @@ import {
   updateFile
 } from '../redux';
 import { userSelector, isDonationModalOpenSelector } from '../../../redux';
+import { Loader } from '../../../components/helpers';
 
 import './editor.css';
 
@@ -949,8 +950,9 @@ class Editor extends Component {
   render() {
     const { theme } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
-
     return (
+      <Suspense fallback={<Loader timeout={600} />}>
+        <span className='notranslate'>
           <MonacoEditor
             editorDidMount={this.editorDidMount}
             editorWillMount={this.editorWillMount}
@@ -958,6 +960,8 @@ class Editor extends Component {
             options={this.options}
             theme={editorTheme}
           />
+        </span>
+      </Suspense>
     );
   }
 }

client/src/templates/Challenges/classic/MultifileEditor.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component, Suspense } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
 import { createSelector } from 'reselect';
@@ -17,7 +17,6 @@ import {
   updateFile
 } from '../redux';
 import './editor.css';
-import { Loader } from '../../../components/helpers';
 import Editor from './Editor';
 
 const propTypes = {
@@ -201,13 +200,12 @@ class MultifileEditor extends Component {
         orientation='horizontal'
         {...reflexProps}
         {...resizeProps}
+        className='editor-container'
       >
         <ReflexElement flex={10} {...reflexProps} {...resizeProps}>
           <ReflexContainer orientation='vertical'>
             {visibleEditors.indexhtml && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
                 <Editor
                   challengeFiles={challengeFiles}
                   containerRef={containerRef}
@@ -220,49 +218,35 @@ class MultifileEditor extends Component {
                   resizeProps={resizeProps}
                   theme={editorTheme}
                 />
-                  </span>
-                </Suspense>
               </ReflexElement>
             )}
             {splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
             {visibleEditors.indexcss && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
                 <Editor
                   challengeFiles={challengeFiles}
                   containerRef={containerRef}
-                      description={
-                        targetEditor === 'indexcss' ? description : null
-                      }
+                  description={targetEditor === 'indexcss' ? description : null}
                   fileKey='indexcss'
                   key='indexcss'
                   resizeProps={resizeProps}
                   theme={editorTheme}
                 />
-                  </span>
-                </Suspense>
               </ReflexElement>
             )}
             {splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
 
             {visibleEditors.indexjs && (
               <ReflexElement {...reflexProps} {...resizeProps}>
-                <Suspense fallback={<Loader timeout={600} />}>
-                  <span className='notranslate'>
                 <Editor
                   challengeFiles={challengeFiles}
                   containerRef={containerRef}
-                      description={
-                        targetEditor === 'indexjs' ? description : null
-                      }
+                  description={targetEditor === 'indexjs' ? description : null}
                   fileKey='indexjs'
                   key='indexjs'
                   resizeProps={resizeProps}
                   theme={editorTheme}
                 />
-                  </span>
-                </Suspense>
               </ReflexElement>
             )}
           </ReflexContainer>

client/src/templates/Challenges/classic/editor.css

@@ -13,3 +13,7 @@
 .vs .monaco-scrollable-element > .scrollbar > .slider {
   z-index: 11;
 }
+
+.editor-container {
+  background: var(--editor-background);
+}