From cad8953e2511e1a3e607a1ae128085cc232d5f63 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 30 Oct 2020 13:34:18 +0000
Subject: [PATCH] Fix indent for folder items without ancestors

These make space for the folder icon using
padding-left when they have ancestors as they are
inline so it only effects the line the first link
is on. Without ancestors they are block-level so
padding-left pads the whole block.

We had a block of CSS that fixed this, by using
text-indent for those without ancestors but the
selector was broken by changes to the HTML (it was
no longer the :first-child).

This uses the :first-of-type pseudo-class instead
to ignore preceding elements of different types.

Also includes changes that move styles for links
out from under elements with a class of
.message-name, which was removed in the previous
commit.
---
 .../stylesheets/components/message.scss       | 60 +++++++++----------
 1 file changed, 27 insertions(+), 33 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 21f0897fc..2aa72a492 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -28,34 +28,26 @@ $govuk-checkboxes-size: 40px;
 $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 $message-type-bottom-spacing: govuk-spacing(4);
 
-.message {
-
-  &-name {
-    margin: 0;
-
-    a {
-
-      &:hover .message-name-separator:before {
-        border-color: $link-hover-colour;
-      }
-
-      .message-name-separator {
-
-        margin-right: -2px;
-        margin-left: -2px;
-
-        &:before {
-          border-color: $link-colour;
-        }
-      }
-    }
-
-    &-separator {
-      @include separator;
-    }
+a {
 
+  &:hover .message-name-separator:before {
+    border-color: $link-hover-colour;
   }
 
+  .message-name-separator {
+
+    margin-right: -2px;
+    margin-left: -2px;
+
+    &:before {
+      border-color: $link-colour;
+    }
+  }
+
+}
+
+.message-name-separator {
+  @include separator;
 }
 
 .template-list {
@@ -72,18 +64,20 @@ $message-type-bottom-spacing: govuk-spacing(4);
 
     &-without-ancestors {
 
-      .message-name {
+      a {
 
-        a {
+        display: block;
+
+        &:first-child {
           display: block;
+        }
 
-          &:first-child {
-            display: block;
-          }
+        &.template-list-folder:first-of-type {
+          background-position: 0 2px;
+          padding-left: 0;
+          text-indent: 35px;
 
-          &.template-list-folder:first-child {
-            background-position: 0 2px;
-            padding-left: 0;
+          @include govuk-media-query($from: tablet) {
             text-indent: 40px;
           }