From 9a33f3363a266bca2e2d062bca4bda14a5b45c14 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Wed, 4 Dec 2019 11:44:14 +0100
Subject: [PATCH] Set fixed width of service-list table.

---
 musician/static/musician/css/default.css | 15 ++++++++++++++-
 musician/templates/musician/mail.html    |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/musician/static/musician/css/default.css b/musician/static/musician/css/default.css
index 381f62e..b2effbc 100644
--- a/musician/static/musician/css/default.css
+++ b/musician/static/musician/css/default.css
@@ -93,8 +93,9 @@ h1.service-name {
     
     font: 16px/21px Roboto;
 }
-.service-list {
+.table.service-list {
     margin-top: 2rem;
+    table-layout: fixed;
 }
 /** TODO update theme instead of overriding **/
 .service-list thead.thead-dark th {
@@ -103,6 +104,10 @@ h1.service-name {
     border-color: transparent;
 }
 /** /TODO **/
+.table.service-list td,
+.table.service-list th {
+    vertical-align: middle;
+}
 
 .service-list thead.thead-dark th:first-of-type {
     border-top-left-radius: .25rem;
@@ -112,6 +117,14 @@ h1.service-name {
     border-top-right-radius: .25rem;
 }
 
+.service-list tfoot td:first-of-type {
+    border-bottom-left-radius: .25rem;
+}
+
+.service-list tfoot td:last-of-type {
+    border-bottom-right-radius: .25rem;
+}
+
 .service-list tbody {
     background: white;
     color: #343434;
diff --git a/musician/templates/musician/mail.html b/musician/templates/musician/mail.html
index b4eeea6..000530e 100644
--- a/musician/templates/musician/mail.html
+++ b/musician/templates/musician/mail.html
@@ -6,6 +6,12 @@
 <h1 class="service-name">{{ service.verbose_name }}</h1>
 <p class="service-description">{{ service.description }}</p>
 <table class="table service-list">
+    <colgroup>
+        <col span="1" style="width: 25%;">
+        <col span="1" style="width: 50%;">
+        <col span="1" style="width: 5%;">
+        <col span="1" style="width: 20%;">
+    </colgroup>
     <thead class="thead-dark">
         <tr>
             <th scope="col">{% trans "Mail address" %}</th>