fix: adjust spacing for preference application checkboxes (#3868)

bloom-housing · Feb 27, 2024 · 8fea8b4 · 8fea8b4
1 parent 603ee54
commit 8fea8b4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx
@@ -228,7 +228,7 @@ export const getCheckboxOption = (
 ) => {
   const optionFieldName = fieldName(question.text, applicationSection, option.text)
   return (
-    <div className={`mb-3 ${option.ordinal !== 1 ? "pt-3" : ""}`} key={option.text}>
+    <div className="mb-3" key={option.text}>
       <div className={`mb-3 field ${resolveObject(optionFieldName, errors) ? "error" : ""}`}>
         {getCheckboxField(
           option,
@@ -244,7 +244,7 @@ export const getCheckboxOption = (
         )}
       </div>
       {option.description && (
-        <div className="ml-8 -mt-3 mb-3">
+        <div className="ml-8 -mt-3 mb-6">
           <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
             <p className="field-note mb-2">
               {option.description}

diff --git a/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx b/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx
@@ -248,7 +248,7 @@ const ApplicationMultiselectQuestionStep = ({
                   <legend className="text__caps-spaced mb-4 sr-only">{question?.text}</legend>
                   {applicationSection ===
                     MultiselectQuestionsApplicationSectionEnum.preferences && (
-                    <div className="mb-8">
+                    <div className="mb-6">
                       <p className="text__caps-spaced m-0">{question?.text}</p>
                       {question?.description && (
                         <p className="field-note mt-3">{question?.description}</p>
@@ -266,7 +266,7 @@ const ApplicationMultiselectQuestionStep = ({
                       ))}
                     </div>
                   )}
-                  <p className="field-note mb-8">
+                  <p className="field-note mb-3">
                     {t("application.household.preferredUnit.optionsLabel")}
                   </p>
                   {allOptions
@@ -280,8 +280,8 @@ const ApplicationMultiselectQuestionStep = ({
               )}
             </CardSection>
           </div>
-          <CardSection>
-            {verifyAddress && (
+          {verifyAddress && (
+            <CardSection>
               <AddressValidationSelection
                 {...{
                   foundAddress,
@@ -291,8 +291,8 @@ const ApplicationMultiselectQuestionStep = ({
                   setVerifyAddressStep,
                 }}
               />
-            )}
-          </CardSection>
+            </CardSection>
+          )}
         </ApplicationFormLayout>
       </Form>
     </FormsLayout>