Wrap, don’t truncate display of folder name in H1

This commit applies a carefully selected blend of `white-space`,
`display` and `background-position` to ensure that:
- you can always see the full name of the current folder in the heading
  (which is useful because people might have mutiple folders with the
  same name, differentiated by some king of suffix)
- the clickable are of a single folder or template in the list is 100%
  width, for the biggest possible hit area
- the name of a folder or template wraps underneath the folder icon (ie
  the folder icon is treated like a normal character, not like a bullet
  point)

app/assets/stylesheets/components/message.scss

@@ -79,6 +79,13 @@
           &:first-child {
             display: block;
           }
+
+          &.template-list-folder:first-child {
+            background-position: 0 2px;
+            padding-left: 0;
+            text-indent: 40px;
+          }
+
         }
 
       }
@@ -89,12 +96,12 @@
 
   &-folder {
 
-    display: inline-block;
+    display: inline;
     padding-left: 40px;
     background-image: file-url('folder-blue-bold.svg');
     background-repeat: no-repeat;
     background-size: auto 20px;
-    background-position: 0px 2px;
+    background-position: 0px 4px;
 
     @include ie-lte(8) {
       background-image: file-url('folder-blue-bold.png');
@@ -143,20 +150,15 @@
     margin-top: 18px;
   }
 
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-
   a,
   &-folder,
   &-subfolder {
 
-    display: inline-block;
+    display: inline;
     vertical-align: top;
     background-repeat: no-repeat;
     background-size: auto 20px;
-    background-position: 0px 2px;
+    background-position: 0px 4px;
     min-height: 30px;
 
   }
@@ -175,11 +177,13 @@
   &-folder-truncated {
     width: 0;
     padding: 0 0 0 30px;
+    white-space: nowrap;
     overflow: hidden;
   }
 
   &-folder-root-truncated {
     max-width: 1.4em;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -191,8 +195,9 @@
 
     &.folder-heading-folder {
 
+      display: inline;
       background-image: file-url('folder-blue-bold.svg');
-      max-width: 33%;
+      background-position: 0px 4px;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -206,6 +211,11 @@
 
     }
 
+    &.folder-heading-folder-truncated {
+      display: inline-block;
+      background-position: 0px 2px;
+    }
+
     &:hover {
       color: $link-hover-colour;
     }