fix: advanced settings card alignment (#608)

src/advanced-settings/scss/AdvancedSettings.scss

@@ -40,16 +40,11 @@
 
   .form-control {
     min-height: 2.75rem;
-    width: $setting-form-control-width;
-  }
-
-  .pgn__card-section {
-    max-width: $setting-form-control-width;
+    flex-grow: 1;
   }
 
   .pgn__card-header {
     padding: 0 0 0 1.5rem;
-    flex-grow: 1;
   }
 
   .pgn__card-status {
@@ -59,8 +54,6 @@
   .pgn__card-header-content {
     margin-top: 1.438rem;
     margin-bottom: 1.438rem;
-    display: flex;
-    flex-direction: revert;
   }
 }
 

src/advanced-settings/scss/_variables.scss

@@ -1,2 +1 @@
 $text-color-base: $gray-700;
-$setting-form-control-width: 34.375rem;

src/advanced-settings/setting-card/SettingCard.jsx

@@ -58,8 +58,9 @@ const SettingCard = ({
   return (
     <li className="field-group course-advanced-policy-list-item">
       <Card className="flex-column setting-card">
-        <Card.Body className="d-flex">
+        <Card.Body className="d-flex row m-0 align-items-center">
           <Card.Header
+            className="col-6"
             title={(
               <ActionRow>
                 {capitalize(displayName)}
@@ -86,10 +87,11 @@ const SettingCard = ({
                     dangerouslySetInnerHTML={{ __html: help }}
                   />
                 </ModalPopup>
+                <ActionRow.Spacer />
               </ActionRow>
             )}
           />
-          <Card.Section>
+          <Card.Section className="col-6 flex-grow-1">
             <Form.Group className="m-0">
               <Form.Control
                 as={TextareaAutosize}