Move message length information before the button

We feel that this is more appropriate because it’s part of the
information you’re agreeing to before you hit submit.

Sometimes users can missing information that doesn’t start left-aligned
to the column they’re interacting with.

It also makes it closer to the Design System component.

We’re keeping it in the sticky footer, so that it’s always visible no
matter where in the message you’re scrolled to (this means you won’t
have to edited to content then scroll down to check whether you’ve
made it fit).

app/assets/stylesheets/components/page-footer.scss

@@ -3,10 +3,6 @@
   position: relative;
   margin-bottom: 30px;
 
-  &--inline-block {
-    display: inline-block;
-  }
-
   &-delete-link {
 
     line-height: 40px;

app/assets/stylesheets/views/template.scss

@@ -60,9 +60,13 @@
   @include core-19($tabular-numbers: true);
   color: $secondary-text-colour;
   vertical-align: bottom;
-  padding: 0 0 govuk-spacing(1) govuk-spacing(2);
+  padding: 0 0 govuk-spacing(6) 0
   display: inline-block;
 
+  .content-fixed__bottom & {
+    padding-bottom: govuk-spacing(3);
+  }
+
   & .govuk-error-message {
     margin-top: 0;
   }

app/templates/components/page-footer.html

@@ -10,10 +10,9 @@
   secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete",
-  centered_button=False,
-  inline_block=False
+  centered_button=False
 ) %}
-  <div class="page-footer {% if inline_block %}page-footer--inline-block{% endif %}">
+  <div class="page-footer">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 

app/templates/components/textbox.html

@@ -11,10 +11,11 @@
   width='2-3',
   suffix=None,
   safe_error_message=False,
-  rows=8
+  rows=8,
+  extra_form_group_classes=''
 ) %}
   <div
-    class="form-group{% if field.errors %} form-group-error{% endif %}"
+    class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
     <label class="form-label" for="{{ field.name }}">

app/templates/views/edit-broadcast-template.html

@@ -22,15 +22,22 @@
           "classes": "govuk-!-width-full",
           "hint": {"text": "Your recipients will not see this"},
         }) }}
-        {{ textbox(form.template_content, highlight_placeholders=False, autosize=True, width='1-1', rows=5) }}
+        {{ textbox(
+          form.template_content,
+          highlight_placeholders=False,
+          autosize=True,
+          width='1-1',
+          rows=5,
+          extra_form_group_classes='govuk-!-margin-bottom-2'
+        ) }}
       </div>
       <div class="govuk-grid-column-full">
         <div class="js-stick-at-bottom-when-scrolling">
-          {{ page_footer('Save', inline_block=True) }}
           <div class="template-content-count">
             <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='broadcast') }}" aria-live="polite">
             </div>
           </div>
+          {{ page_footer('Save') }}
         </div>
       </div>
     </div>

app/templates/views/edit-sms-template.html

@@ -22,18 +22,24 @@
             "classes": "govuk-!-width-full",
             "hint": {"text": "Your recipients will not see this"}
           }) }}
-          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
+          {{ textbox(
+            form.template_content,
+            highlight_placeholders=True,
+            width='1-1',
+            rows=5,
+            extra_form_group_classes='govuk-!-margin-bottom-2'
+          ) }}
           {% if current_user.platform_admin %}
             {{ form.process_type }}
           {% endif %}
         </div>
         <div class="govuk-grid-column-full">
           <div class="js-stick-at-bottom-when-scrolling">
-            {{ page_footer('Save', inline_block=True) }}
             <div class="template-content-count">
               <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
               </div>
             </div>
+            {{ page_footer('Save') }}
           </div>
         </div>
         <aside class="govuk-grid-column-full">

tests/app/main/views/test_templates.py

@@ -490,10 +490,6 @@ def test_should_show_page_for_one_template(
         'polite'
     )
 
-    assert page.select_one('.page-footer')['class'] == [
-        'page-footer', 'page-footer--inline-block',
-    ]
-
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 
 
@@ -534,10 +530,6 @@ def test_broadcast_template_doesnt_highlight_placeholders_but_does_count_charact
         'polite'
     )
 
-    assert page.select_one('.page-footer')['class'] == [
-        'page-footer', 'page-footer--inline-block',
-    ]
-
 
 def test_caseworker_redirected_to_one_off(
     client_request,