From 5ac2abb7bcb0e33e112ac90bafb14beb47088fe3 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 23 Apr 2019 10:21:19 +0100
Subject: [PATCH] Make center column of table wider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Most of the content of our ‘settings’ tables is in the value, not the
key. The value is in the middle column. So we should allocate the most
space to the value.

The previous layout was based on the premise that most pages divided the
grid like this:
```
 _______ _______ _______ _______ _______ _______ _______ _______
|  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |
|               |               |               |               |
|      2/8      |      2/8      |      2/8      |      2/8      |
|               |               |               |               |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
|               |                       |                       |
|               |          3/8          |          3/8          |
|               |                       |                       |
|               |–Label–––––––––––––––––|–Value––––––––––––Link–|
|               |                       |                       |
|_______________|_______________________|_______________________|
```

This was because a lot of pages had a left column for emails, and a
right column for text messages, so it felt consistent for tables to
always default to 50% of the width of the main column.

This consistency has faded with time, especially as we added letters.

So this commit changes these tables to allocate more space to the
central column, but still sticking to the grid like this:

```
 _______ _______ _______ _______ _______ _______ _______ _______
|  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |  1/8  |
|       |       |       |       |       |       |       |       |
|      2/8      |      2/8      |              4/8              |
|               |               |                               |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
|               |               |                       |       |
|               |      2/8      |          3/8          |  1/8  |
|               |               |                       |       |
|               |–Label–––––––––|–Value–––––––––––––––––|–––Link|

|_______________|_______________|_______________________|_______|
```

Since there’s more space to display the value of a setting this commit
also truncates settings that are too long to fit in the width of the
column (for example a long email address) rather than the previous
behaviour of truncating them. This all just makes things look a bit
cleaner.
---
 app/assets/stylesheets/components/table.scss  | 38 +++++++++++++++++++
 .../organisation/settings/index.html          |  2 +-
 app/templates/views/service-settings.html     |  2 +-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index cd9b1643f..f47160917 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -51,6 +51,44 @@
 
 }
 
+.settings-table {
+
+  table {
+    table-layout: fixed;
+  }
+
+  th {
+
+    &.table-field-heading-first {
+      width: 35%;  // 33.33% + fudge
+    }
+
+    &:last-child {
+      width: 17.5%  // 16.67% + fudge
+    }
+
+  }
+
+  td {
+
+    &:first-child {
+
+      div {
+        white-space: normal;
+      }
+
+    }
+
+    div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+  }
+
+}
+
 %table-field,
 .table-field {
 
diff --git a/app/templates/views/organisations/organisation/settings/index.html b/app/templates/views/organisations/organisation/settings/index.html
index 59739904b..f1f6c5a54 100644
--- a/app/templates/views/organisations/organisation/settings/index.html
+++ b/app/templates/views/organisations/organisation/settings/index.html
@@ -29,7 +29,7 @@
 
   {% if current_user.platform_admin %}
     <h2 class="heading-medium">Platform admin settings</h2>
-    <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+    <div class="bottom-gutter-3-2 settings-table body-copy-table">
       {% call mapping_table(
         caption='Platform admin settings',
         field_headings=['Label', 'Value', 'Action'],
diff --git a/app/templates/views/service-settings.html b/app/templates/views/service-settings.html
index 6b81af730..91cb71aed 100644
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -10,7 +10,7 @@
 
     <h1 class="heading-large">Settings</h1>
 
-    <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+    <div class="bottom-gutter-3-2 settings-table body-copy-table">
 
       {% call mapping_table(
         caption='General',