From c47c800cfaa23ea3fc93da2b8eef8d04147941fd Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Fri, 22 Sep 2023 17:29:38 -0400
Subject: [PATCH] fix: advanced settings card alignment (#608)

---
 src/advanced-settings/scss/AdvancedSettings.scss   | 9 +--------
 src/advanced-settings/scss/_variables.scss         | 1 -
 src/advanced-settings/setting-card/SettingCard.jsx | 6 ++++--
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/advanced-settings/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
index 676c6dc81..a8e0d0434 100644
--- a/src/advanced-settings/scss/AdvancedSettings.scss
+++ b/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;
   }
 }
 
diff --git a/src/advanced-settings/scss/_variables.scss b/src/advanced-settings/scss/_variables.scss
index 915aecc19..22c26a836 100644
--- a/src/advanced-settings/scss/_variables.scss
+++ b/src/advanced-settings/scss/_variables.scss
@@ -1,2 +1 @@
 $text-color-base: $gray-700;
-$setting-form-control-width: 34.375rem;
diff --git a/src/advanced-settings/setting-card/SettingCard.jsx b/src/advanced-settings/setting-card/SettingCard.jsx
index 15cef8ad9..e522963f8 100644
--- a/src/advanced-settings/setting-card/SettingCard.jsx
+++ b/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}