Improve table styles

* Nicer table headers
* Hide invitation IDs on small screens

app/assets/stylesheets/layout.scss

@@ -118,11 +118,6 @@ main {
     }
   }
 
-  th, td {
-    line-height: 1.5rem;
-    padding-right: 1rem;
-  }
-
   section {
     padding-bottom: 3rem;
     margin-bottom: 3rem;
@@ -132,6 +127,29 @@ main {
     }
   }
 
+  table {
+    width: 100%;
+
+    th, td {
+      line-height: 1.5rem;
+      padding-right: 1rem;
+
+      &.hide-small {
+        @include media-max(small) {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      color: $text-color-discreet;
+      font-weight: normal;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+
   .actions {
     margin-top: 2rem;
   }

app/views/invitations/index.html.erb

@@ -29,7 +29,7 @@
     <table>
       <thead>
         <tr>
-          <th>URL</th>
+          <th class="hide-small">ID</th>
           <th>Accepted</th>
           <th>Invited user</th>
         </tr>
@@ -37,7 +37,7 @@
       <tbody>
         <% @invitations_used.each do |invitation| %>
           <tr>
-            <td class="overflow-ellipsis"><%= invitation_url(invitation.token) %></td>
+            <td class="hide-small"><%= invitation.token %></td>
             <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
             <td><%= User.find(invitation.invited_user_id).address %></td>
           </tr>