From 2732a0b80b0370e30f4968466ac0e42ba2fc6900 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 25 Oct 2019 15:07:34 +0100
Subject: [PATCH] Make things line up on the usage page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mixture of three column/two column layouts on this page has always
looked a bit disjointed. And since the left column will only even
contain the names of months, which are short, it doesn’t need a full
half of the page width.
---
 app/assets/stylesheets/components/table.scss | 14 ++++++++++++++
 app/templates/views/usage-with-letters.html  |  8 ++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 840d535f6..7be4fb25f 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -98,6 +98,20 @@
 
 }
 
+.usage-table {
+
+  .table-field-heading-first {
+    width: 35%;  // 33.33% + fudge
+  }
+
+  .table-row {
+    th {
+      width: 17.5%  // 16.67% + fudge
+    }
+  }
+
+}
+
 %table-field,
 .table-field {
 
diff --git a/app/templates/views/usage-with-letters.html b/app/templates/views/usage-with-letters.html
index 30cc88bd2..294d25dfd 100644
--- a/app/templates/views/usage-with-letters.html
+++ b/app/templates/views/usage-with-letters.html
@@ -78,7 +78,7 @@
       </div>
 
       {% if months %}
-        <div class="dashboard-table body-copy-table">
+        <div class="dashboard-table usage-table body-copy-table">
           {% call(month, row_index) list_table(
             months,
             caption="Total spend",
@@ -124,12 +124,12 @@
     </div>
 
     <div class="grid-row">
-      <div class="column-half">
+      <div class="column-one-third">
         <p class="align-with-heading-copy">
-          Financial year ends 31 March.
+          Financial year ends 31&nbsp;March
         </p>
       </div>
-      <div class="column-half">
+      <div class="column-two-thirds">
         <p class="align-with-heading-copy">
           What counts as 1 text message?<br />
           See <a href="{{ url_for('.pricing') }}">pricing</a>.