From e0d1f8e8ffab28193dbdb97879f0d76ab77a11a8 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 31 Jan 2019 20:54:25 +0000
Subject: [PATCH] =?UTF-8?q?Wrap,=20don=E2=80=99t=20truncate=20display=20of?=
 =?UTF-8?q?=20folder=20name=20in=20H1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 .../stylesheets/components/message.scss       | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 8e73a8cc2..f008cfbcf 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/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;
     }