fix: settings col width in advanced view (#233)

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
   className="settingsWidget ml-4"
 >
   <div
-    className="mb-3 settingsCardTopdiv"
+    className="mb-3"
   >
     <TypeCard
       problemType="stringresponse"
@@ -92,7 +92,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced
   className="settingsWidget ml-4"
 >
   <div
-    className="mb-3 settingsCardTopdiv"
+    className="mb-3"
   >
     <TypeCard
       problemType="stringresponse"

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

@@ -65,7 +65,7 @@ export const SettingsWidget = ({
 
   return (
     <div className="settingsWidget ml-4">
-      <div className="mb-3 settingsCardTopdiv">
+      <div className="mb-3">
         <TypeCard
           answers={answers}
           blockTitle={blockTitle}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js

@@ -191,7 +191,7 @@ export const messages = {
   },
   ConfirmSwitchButtonLabel: {
     id: 'authoring.problemeditor.settings.switchtoadvancededitor.message',
-    defaultMessage: 'Switch To Advanced Editor',
+    defaultMessage: 'Switch to advanced editor',
     description: 'message to confirm that a user wants to use the advanced editor',
   },
   explanationInputLabel: {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap

@@ -14,7 +14,7 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
         variant="default"
       >
         <FormattedMessage
-          defaultMessage="Switch To Advanced Editor"
+          defaultMessage="Switch to advanced editor"
           description="message to confirm that a user wants to use the advanced editor"
           id="authoring.problemeditor.settings.switchtoadvancededitor.message"
         />

src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap

@@ -7,8 +7,9 @@ exports[`EditorProblemView component renders raw editor 1`] = `
   <div
     className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
   >
-    <span
-      className="flex-grow-1"
+    <Container
+      className="advancedEditorTopMargin p-0"
+      fluid={true}
     >
       <RawEditor
         content={null}
@@ -19,7 +20,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
         }
         lang="xml"
       />
-    </span>
+    </Container>
     <span
       className="editProblemView-settingsColumn"
     >

src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

@@ -2,6 +2,8 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { connect } from 'react-redux';
+import { Container } from '@edx/paragon';
+
 import AnswerWidget from './AnswerWidget';
 import SettingsWidget from './SettingsWidget';
 import QuestionWidget from './QuestionWidget';
@@ -25,16 +27,16 @@ export const EditProblemView = ({
   return (
     <EditorContainer getContent={getContent}>
       <div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
-        <span className="flex-grow-1">
-          {isAdvancedProblemType ? (
+        {isAdvancedProblemType ? (
+          <Container fluid className="advancedEditorTopMargin p-0">
             <RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
-          ) : (
-            <>
-              <QuestionWidget />
-              <AnswerWidget problemType={problemType} />
-            </>
-          )}
-        </span>
+          </Container>
+        ) : (
+          <span className="flex-grow-1">
+            <QuestionWidget />
+            <AnswerWidget problemType={problemType} />
+          </span>
+        )}
         <span className="editProblemView-settingsColumn">
           <SettingsWidget problemType={problemType} />
         </span>

src/editors/containers/ProblemEditor/components/EditProblemView/index.scss

@@ -1,6 +1,11 @@
 .editProblemView {
   .editProblemView-settingsColumn {
-    flex-basis: 320px;
+    width: 320px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .advancedEditorTopMargin {
+    margin-top: 40px;
   }
 }
 

src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RawEditor renders as expected with content equal to null 1`] = `
-<Fragment>
+<div>
   <Alert
     variant="danger"
   >
@@ -9,11 +9,11 @@ exports[`RawEditor renders as expected with content equal to null 1`] = `
     html
      editor.
   </Alert>
-</Fragment>
+</div>
 `;
 
 exports[`RawEditor renders as expected with default behavior 1`] = `
-<Fragment>
+<div>
   <Alert
     variant="danger"
   >
@@ -32,11 +32,11 @@ exports[`RawEditor renders as expected with default behavior 1`] = `
     lang="html"
     value="eDiTablE Text"
   />
-</Fragment>
+</div>
 `;
 
 exports[`RawEditor renders as expected with lang equal to xml 1`] = `
-<Fragment>
+<div>
   <injectIntl(ShimmedIntlComponent)
     innerRef={
       Object {
@@ -48,5 +48,5 @@ exports[`RawEditor renders as expected with lang equal to xml 1`] = `
     lang="xml"
     value="eDiTablE Text"
   />
-</Fragment>
+</div>
 `;

src/editors/sharedComponents/RawEditor/index.jsx

@@ -18,7 +18,7 @@ export const RawEditor = ({
   const value = getValue(content);
 
   return (
-    <>
+    <div>
       {lang === 'xml' ? null : (
         <Alert variant="danger">
           You are using the raw {lang} editor.
@@ -32,7 +32,7 @@ export const RawEditor = ({
         />
       ) : null}
 
-    </>
+    </div>
   );
 };
 RawEditor.defaultProps = {

src/editors/sharedComponents/RawEditor/index.test.jsx

@@ -30,6 +30,7 @@ describe('RawEditor', () => {
     },
     content: null,
     lang: 'html',
+    width: { width: '80%' },
   };
 
   test('renders as expected with default behavior', () => {