From a9f79bcf078fae57c52b496762ca2e78f285a725 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 9 Jun 2016 11:05:54 +0100
Subject: [PATCH] =?UTF-8?q?Truncate=20items=20that=20don=E2=80=99t=20fit?=
 =?UTF-8?q?=20in=20the=20first=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first column of a table is a heading, and will always be 50% wide.

It makes the table harder to scan when the information in the first
column breaks onto multiple lines, and introduces uneven whitespace in
the table.

This commit adds some CSS to force things in the first column to only
ever be one line. If they are too long to fit, they get truncated with
an ellipsis (`…`)
---
 app/assets/stylesheets/components/table.scss | 12 ++++++++++--
 app/assets/stylesheets/views/dashboard.scss  |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 45a86e33e..05079605f 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -1,6 +1,7 @@
 .table {
   margin-bottom: $gutter;
   width: 100%;
+  table-layout: fixed;
 }
 
 .table-heading {
@@ -16,11 +17,14 @@
 
 .table-row {
   th {
+    display: table-cell;
     width: 52.5%;
     font-weight: normal;
 
-    a {
-      max-height: 1.25em;
+    .hint {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }
@@ -101,6 +105,10 @@
 
 .table-field-heading {
 
+  &-first {
+    width: 52.5%;
+  }
+
   &:last-child {
     padding-right: 0;
   }
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 04c2cc622..6069a8f20 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -58,6 +58,10 @@
 
   &-filename {
     @include bold-19;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &-hint {