Fix repo page ui issues, show full last commit message in repo view.

Integrates changes from ClemMakesApps' commit:
8581e152, although it was reverted to avoid frustrating conflicts.

See MR: !5530 (diffs)

2 files changed, 19 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5da390118c6..abfae2e00fb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -35,6 +35,7 @@ $gl-icon-color:        $gl-placeholder-color;
 $gl-grayish-blue:      #7f8fa4;
 $gl-gray:              $gl-text-color;
 $gl-gray-dark:         #313236;
+$gl-gray-light:        $gl-placeholder-color;
 $gl-header-color:      $gl-title-color;
 
 /*
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 9da40fe2b09..e330300f9a1 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -22,6 +22,15 @@
         line-height: 21px;
       }
 
+      .last-commit {
+        @include str-truncated(60%);
+      }
+
+      .commit-history-link-spacer {
+        margin: 0 10px;
+        color: $table-border-color;
+      }
+
       &:hover {
         td {
           background-color: $row-hover;
@@ -77,11 +86,17 @@
     }
   }
 
-  .tree_commit {
-    color: $gl-gray;
+  .tree-time-ago {
+    min-width: 135px;
+    color: $gl-gray-light;
+  }
+
+  .tree-commit {
+    max-width: 320px;
+    color: $gl-gray-light;
 
     .tree-commit-link {
-      color: $gl-gray;
+      color: $gl-gray-light;
 
       &:hover {
         text-decoration: underline;