Style template length message to sit inline

This looks tidy, and because of the sticky footer it means the message
is always visible, even if your template is quite long. So no matter
where you’re scrolled to in the template you don’t have to scroll to the
bottom to see the count update.

app/assets/stylesheets/components/message.scss

@@ -205,7 +205,7 @@ a {
       margin: 0;
     }
 
-    .content-fixed & {
+    .content-fixed__bottom & {
       right: govuk-spacing(3);
     }
 

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

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

app/assets/stylesheets/views/template.scss

@@ -55,3 +55,15 @@
   top: 51px; // aligns with ‘change postage’ link
   left: 66px; // Aligns to left of logo area
 }
+
+.template-content-count {
+  @include core-19($tabular-numbers: true);
+  color: $secondary-text-colour;
+  vertical-align: bottom;
+  padding: 0 0 govuk-spacing(1) govuk-spacing(2);
+  display: inline-block;
+
+  & .govuk-error-message {
+    margin-top: 0;
+  }
+}

app/templates/components/page-footer.html

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

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

@@ -26,7 +26,7 @@
       </div>
       <div class="govuk-grid-column-full">
         <div class="js-stick-at-bottom-when-scrolling">
-          {{ page_footer('Save') }}
+          {{ page_footer('Save', inline_block=True) }}
           <span 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>

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

@@ -29,8 +29,8 @@
         </div>
         <div class="govuk-grid-column-full">
           <div class="js-stick-at-bottom-when-scrolling">
-            {{ page_footer('Save') }}
-            <span class="template-list-selected-counter">
+            {{ page_footer('Save', inline_block=True) }}
+            <span 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>
             </span>

tests/app/main/views/test_templates.py

@@ -490,6 +490,10 @@ 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)
 
 
@@ -530,6 +534,10 @@ 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,