From 8a5e7a00dcdcf766e2aab9ccb948206c68be3a96 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 25 Oct 2019 15:12:27 +0100
Subject: [PATCH 1/2] Remove min-height from sticky submit buttons

It makes them get out of alignment with other things in sticky footers.

The problem of buttons getting too close to the bottom of the window can
be fixed with some min-height on the container instead.
---
 .../stylesheets/components/stick-at-top-when-scrolling.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index 3e5f7eb11..6c27bb445 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -43,6 +43,7 @@ $sticky-padding: $gutter * 2 / 3;
   transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
   padding: $sticky-padding 0 $sticky-padding $gutter-half;
   margin-top: -$sticky-padding;
+  min-height: 40px;
 
   & + .js-stick-at-bottom-when-scrolling {
     margin-top: ($sticky-padding * 2) * -1;
@@ -54,7 +55,6 @@ $sticky-padding: $gutter * 2 / 3;
 
   .page-footer {
     margin-bottom: 0;
-    min-height: 50px;
   }
 
   .page-footer-delete-link-without-button {

From 4e026bc306bdfa06f276efd244d64c0a9fb92bc8 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 31 Oct 2019 10:49:02 +0000
Subject: [PATCH 2/2] Make sure all sticky footer variants are aligned
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bottom margin should always be consistent. Height of footers doesn’t
have to be consistent. Items on the left and right should baseline
align.
---
 app/assets/stylesheets/components/page-footer.scss     | 10 +++++++++-
 .../components/stick-at-top-when-scrolling.scss        |  9 ++-------
 app/templates/views/notifications/check.html           |  2 +-
 app/templates/views/notifications/notification.html    |  2 +-
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index 733f15d5f..8bc4ad4be 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -38,9 +38,17 @@
   }
 
   &-right-aligned-link {
+
     position: absolute;
     right: 0;
-    top: 10px;  // align baseline with buttons
+    top: 9px;  // align baseline with buttons
+
+    &-without-button {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
   }
 
   .button,
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index 6c27bb445..df55b945c 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -43,7 +43,6 @@ $sticky-padding: $gutter * 2 / 3;
   transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
   padding: $sticky-padding 0 $sticky-padding $gutter-half;
   margin-top: -$sticky-padding;
-  min-height: 40px;
 
   & + .js-stick-at-bottom-when-scrolling {
     margin-top: ($sticky-padding * 2) * -1;
@@ -54,11 +53,7 @@ $sticky-padding: $gutter * 2 / 3;
   }
 
   .page-footer {
-    margin-bottom: 0;
-  }
-
-  .page-footer-delete-link-without-button {
-    margin-top: 10px;
+    margin-bottom: 1px;
   }
 
   .notification-status {
@@ -66,7 +61,7 @@ $sticky-padding: $gutter * 2 / 3;
   }
 
   .button-secondary {
-    margin-right: $gutter-half;
+    margin: 0 $gutter-half 3px 0;
   }
 
 }
diff --git a/app/templates/views/notifications/check.html b/app/templates/views/notifications/check.html
index 9fc2ff20a..079bf3314 100644
--- a/app/templates/views/notifications/check.html
+++ b/app/templates/views/notifications/check.html
@@ -78,7 +78,7 @@
         <button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
       {% endif %}
       {% if template.template_type == 'letter' %}
-        <a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link">Download as a PDF</a>
+        <a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link{% if error %}-without-button{% endif %}">Download as a PDF</a>
       {% endif %}
     </form>
   </div>
diff --git a/app/templates/views/notifications/notification.html b/app/templates/views/notifications/notification.html
index 0446406ef..905668410 100644
--- a/app/templates/views/notifications/notification.html
+++ b/app/templates/views/notifications/notification.html
@@ -88,7 +88,7 @@
           {% else %}
             <div>&nbsp;</div>
           {% endif %}
-          <a class="page-footer-right-aligned-link" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
+          <a class="page-footer-right-aligned-link-without-button" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
         </div>
       </div>
     {% elif template.template_type == 'email' %}