From 84e9c1384abce427882949a5f7c6d612a8989295 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Thu, 23 Nov 2023 10:31:45 +0200
Subject: [PATCH] fix: layout responsive

---
 .../AnswerWidget/AnswerOption.jsx             |  6 +-
 .../__snapshots__/AnswerOption.test.jsx.snap  | 12 ++--
 .../__snapshots__/index.test.jsx.snap         |  6 +-
 .../EditProblemView/SettingsWidget/index.jsx  |  2 +-
 .../EditProblemView/SettingsWidget/index.scss |  4 +-
 .../__snapshots__/index.test.jsx.snap         | 10 ++--
 .../components/EditProblemView/index.jsx      |  6 +-
 .../components/EditProblemView/index.scss     | 22 ++++++++
 .../__snapshots__/index.test.jsx.snap         |  2 +-
 .../content/AdvanceTypeSelect.jsx             |  4 +-
 .../AdvanceTypeSelect.test.jsx.snap           | 56 +++++++++++++++++++
 .../components/SelectTypeModal/index.jsx      |  2 +-
 12 files changed, 106 insertions(+), 26 deletions(-)

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
index 799dc62fb..72b918243 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -54,7 +54,7 @@ export const AnswerOption = ({
       return (
         <Form.Control
           as="textarea"
-          className="answer-option-textarea text-gray-500 small"
+          className="answer-option-textarea text-gray-500 small text-break"
           autoResize
           rows={1}
           value={answer.title}
@@ -68,7 +68,7 @@ export const AnswerOption = ({
       <div>
         <Form.Control
           as="textarea"
-          className="answer-option-textarea text-gray-500 small"
+          className="answer-option-textarea text-gray-500 small text-break"
           autoResize
           rows={1}
           value={answer.title}
@@ -87,7 +87,7 @@ export const AnswerOption = ({
     <Collapsible.Advanced
       open={isFeedbackVisible}
       onToggle={toggleFeedback}
-      className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+      className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
     >
       <div className="mr-1 d-flex">
         <Checker
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
index 7cd0bd8bf..5faf1e28e 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AnswerOption render snapshot: renders correct option with feedback 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -78,7 +78,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
 
 exports[`AnswerOption render snapshot: renders correct option with numeric input problem 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -105,7 +105,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
     <Form.Control
       as="textarea"
       autoResize={true}
-      className="answer-option-textarea text-gray-500 small"
+      className="answer-option-textarea text-gray-500 small text-break"
       onChange={[Function]}
       placeholder="Enter an answer"
       rows={1}
@@ -155,7 +155,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
 
 exports[`AnswerOption render snapshot: renders correct option with numeric input problem and answer range 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
@@ -185,7 +185,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
       <Form.Control
         as="textarea"
         autoResize={true}
-        className="answer-option-textarea text-gray-500 small"
+        className="answer-option-textarea text-gray-500 small text-break"
         onChange={[Function]}
         placeholder="Enter an answer range"
         rows={1}
@@ -247,7 +247,7 @@ exports[`AnswerOption render snapshot: renders correct option with numeric input
 
 exports[`AnswerOption render snapshot: renders correct option with selected unselected feedback 1`] = `
 <Advanced
-  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2 text-break"
   onToggle={[Function]}
   open={false}
 >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
index ea8ae5d6f..828bc823b 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"
@@ -83,7 +83,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"
@@ -164,7 +164,7 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
 
 exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
 <div
-  className="settingsWidget ml-4"
+  className="settingsWidget ml-md-4"
 >
   <div
     className="mb-3"
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
index ec229c7fc..e8aaa8944 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -55,7 +55,7 @@ export const SettingsWidget = ({
   };
 
   return (
-    <div className="settingsWidget ml-4">
+    <div className="settingsWidget ml-md-4">
       <div className="mb-3">
         <TypeCard
           answers={answers}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
index ec4cee441..90108ada7 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
@@ -11,7 +11,9 @@
 }
 
 .settingsWidget {
-    margin-top: 40px;
+    @media (min-width: 768px) {
+        margin-top: 40px;
+    }
     .pgn__form-text {
         font-size: small;
     }
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
index c5759ebc7..6e1686986 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
@@ -42,7 +42,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
     />
   </Component>
   <div
-    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+    className="editProblemView d-flex flex-row flex-wrap justify-content-end"
   >
     <Container
       className="advancedEditorTopMargin p-0"
@@ -59,7 +59,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
       />
     </Container>
     <span
-      className="editProblemView-settingsColumn"
+      className="editProblemView-settingsColumn mb-3"
     >
       <injectIntl(ShimmedIntlComponent)
         problemType="advanced"
@@ -118,10 +118,10 @@ exports[`EditorProblemView component renders simple view 1`] = `
     </div>
   </Component>
   <div
-    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+    className="editProblemView d-flex flex-row flex-wrap justify-content-end"
   >
     <span
-      className="flex-grow-1 mb-5"
+      className="editProblemView-mainColumn flex-grow-1 mb-3 mb-md-5"
     >
       <injectIntl(ShimmedIntlComponent) />
       <injectIntl(ShimmedIntlComponent) />
@@ -130,7 +130,7 @@ exports[`EditorProblemView component renders simple view 1`] = `
       />
     </span>
     <span
-      className="editProblemView-settingsColumn"
+      className="editProblemView-settingsColumn mb-3"
     >
       <injectIntl(ShimmedIntlComponent)
         problemType="multiplechoiceresponse"
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
index d01534dd6..8bb89b131 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
@@ -97,19 +97,19 @@ export const EditProblemView = ({
           </>
         )}
       </AlertModal>
-      <div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
+      <div className="editProblemView d-flex flex-row flex-wrap justify-content-end">
         {isAdvancedProblemType ? (
           <Container fluid className="advancedEditorTopMargin p-0">
             <RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
           </Container>
         ) : (
-          <span className="flex-grow-1 mb-5">
+          <span className="editProblemView-mainColumn flex-grow-1 mb-3 mb-md-5">
             <QuestionWidget />
             <ExplanationWidget />
             <AnswerWidget problemType={problemType} />
           </span>
         )}
-        <span className="editProblemView-settingsColumn">
+        <span className="editProblemView-settingsColumn mb-3">
           <SettingsWidget problemType={problemType} />
         </span>
       </div>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
index 4d8bdd07d..3a4beeb3f 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -1,12 +1,34 @@
+.selectTypeContainer {
+  max-width: 100%;
+}
+
 .editProblemView {
+  .editProblemView-mainColumn {
+    max-width: calc(100% - 345px);
+
+    @media (max-width: 767px) {
+      max-width: 100%;
+    }
+  }
   .editProblemView-settingsColumn {
     width: 320px;
     flex-grow: 0;
     flex-shrink: 0;
+    @media (max-width: 767px) {
+      width: 100%;
+    }
   }
   .advancedEditorTopMargin {
     margin-top: 40px;
   }
+  .answer-option .mce-content-body:before {
+    @media (max-width: 767px) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 90%;
+    }
+  }
 }
 
 .tinyMceWidget {
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
index 51f08eada..72ded5bec 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`SelectTypeModal snapshot 1`] = `
     className="justify-content-center"
   >
     <Stack
-      className="flex-wrap mb-6"
+      className="selectTypeContainer flex-wrap mb-6"
       direction="horizontal"
       gap={4}
     >
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
index 486a3dfbb..3a1cb4c48 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
@@ -44,7 +44,7 @@ export const AdvanceTypeSelect = ({
             if (data.status !== '') {
               return (
                 <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
-                  <Form.Radio id={type} value={type}>
+                  <Form.Radio id={type} value={type} controlClassName="flex-shrink-0">
                     {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                   </Form.Radio>
                   <ActionRow.Spacer />
@@ -67,7 +67,7 @@ export const AdvanceTypeSelect = ({
             }
             return (
               <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
-                <Form.Radio id={type} value={type}>
+                <Form.Radio id={type} value={type} controlClassName="flex-shrink-0">
                   {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                 </Form.Radio>
                 <ActionRow.Spacer />
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
index 79a799057..a4b0fb142 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
@@ -38,6 +38,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -49,6 +50,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -93,6 +95,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -104,6 +107,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -148,6 +152,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -192,6 +197,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -203,6 +209,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -296,6 +303,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -307,6 +315,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -351,6 +360,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -362,6 +372,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -406,6 +417,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -450,6 +462,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -461,6 +474,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -554,6 +568,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -565,6 +580,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -609,6 +625,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -620,6 +637,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -664,6 +682,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -708,6 +727,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -719,6 +739,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -812,6 +833,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -823,6 +845,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -867,6 +890,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -878,6 +902,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -922,6 +947,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -966,6 +992,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -977,6 +1004,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -1070,6 +1098,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -1081,6 +1110,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -1125,6 +1155,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -1136,6 +1167,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -1180,6 +1212,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -1224,6 +1257,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -1235,6 +1269,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -1328,6 +1363,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -1339,6 +1375,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -1383,6 +1420,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -1394,6 +1432,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -1438,6 +1477,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -1482,6 +1522,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -1493,6 +1534,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -1586,6 +1628,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -1597,6 +1640,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -1641,6 +1685,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -1652,6 +1697,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -1696,6 +1742,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -1740,6 +1787,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -1751,6 +1799,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
@@ -1844,6 +1893,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="blankadvanced"
           value="blankadvanced"
         >
@@ -1855,6 +1905,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="circuitschematic"
           value="circuitschematic"
         >
@@ -1899,6 +1950,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="jsinputresponse"
           value="jsinputresponse"
         >
@@ -1910,6 +1962,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="customgrader"
           value="customgrader"
         >
@@ -1954,6 +2007,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="imageresponse"
           value="imageresponse"
         >
@@ -1998,6 +2052,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="formularesponse"
           value="formularesponse"
         >
@@ -2009,6 +2064,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
         className="border-primary-100 border-bottom m-0 py-3 w-100"
       >
         <Radio
+          controlClassName="flex-shrink-0"
           id="problemwithhint"
           value="problemwithhint"
         >
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
index c74b0768c..df9ac3e4d 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx
@@ -19,7 +19,7 @@ export const SelectTypeModal = ({
     <SelectTypeWrapper onClose={onClose} selected={selected}>
       <Row className="justify-content-center">
         {(!Object.values(AdvanceProblemKeys).includes(selected)) ? (
-          <Stack direction="horizontal" gap={4} className="flex-wrap mb-6">
+          <Stack direction="horizontal" gap={4} className="selectTypeContainer flex-wrap mb-6">
             <ProblemTypeSelect selected={selected} setSelected={setSelected} />
             <Preview problemType={selected} />
           </Stack>