CCM-11474: spacing

Author: harrim91

frontend/src/__tests__/components/forms/MessagePlan/__snapshots__/MessagePlan.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`renders error if form is submitted with empty name 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -163,6 +163,10 @@ exports[`renders error if form is submitted with empty name 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"
@@ -227,7 +231,7 @@ exports[`renders error if form is submitted with name too long 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -312,6 +316,10 @@ exports[`renders error if form is submitted with name too long 1`] = `
           value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"
@@ -376,7 +384,7 @@ exports[`renders error if form is submitted with no campaign id selected 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -449,6 +457,10 @@ exports[`renders error if form is submitted with no campaign id selected 1`] = `
           value="My template"
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <div
         class="nhsuk-form-group nhsuk-form-group--error"
       >
@@ -540,7 +552,7 @@ exports[`renders form with select for multiple campaign ids 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -613,6 +625,10 @@ exports[`renders form with select for multiple campaign ids 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <div
         class="nhsuk-form-group"
       >
@@ -693,7 +709,7 @@ exports[`renders form with single campaign id displayed 1`] = `
       value="no_token"
     />
     <div
-      class="nhsuk-form-group"
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
     >
       <input
         name="messageOrder"
@@ -766,6 +782,10 @@ exports[`renders form with single campaign id displayed 1`] = `
           value=""
         />
       </div>
+    </div>
+    <div
+      class="nhsuk-form-group nhsuk-u-margin-bottom-6"
+    >
       <label
         class="nhsuk-label nhsuk-label--s"
         for="campaignId"

frontend/src/components/forms/MessagePlan/MessagePlan.tsx

@@ -34,7 +34,7 @@ export function MessagePlanForm({
 
   return (
     <NHSNotifyFormWrapper formId='message-plan' action={action}>
-      <div className='nhsuk-form-group'>
+      <div className='nhsuk-form-group nhsuk-u-margin-bottom-6'>
         <input
           type='hidden'
           name='messageOrder'
@@ -70,6 +70,8 @@ export function MessagePlanForm({
           error={state.errorState?.fieldErrors?.name?.join(',')}
           data-testid='name-field'
         />
+      </div>
+      <div className='nhsuk-form-group nhsuk-u-margin-bottom-6'>
         {campaignIds.length === 1 ? (
           <>
             <Label htmlFor='campaignId' size='s'>