Make merits table look nicer.

src/frontend/scripts/characters/edit.ts

@@ -144,6 +144,7 @@ import * as api from "../api";
             const removeButton = document.createElement('button');
             removeButton.innerText = "X";
             removeButton.setAttribute('data-event-type', 'remove-merit');
+            removeButton.classList.add('remove-merit');
 
             const dots = document.createElement('span');
             dots.innerText = 'Dots';

src/frontend/templates/characters/edit_character.html.tera

@@ -82,6 +82,59 @@
          background-color: lightgray;
          margin: 0;
      }
+
+     #merits {
+         padding: 4px;
+     }
+
+     #merit-list {
+         display: inline-flex;
+         flex-direction: column;
+     }
+
+     .merit {
+         margin: 0;
+         padding: 0;
+         display: inline-flex;
+         border: 1px solid gray;
+         margin-top: -1px;
+     }
+
+     .merit .merit-name {
+         width: 10em;
+         vertical-align: text-bottom;
+         padding: 0;
+         margin: 8px;
+         border: none;
+         border: 0px solid gray;
+         border-bottom-width: 1px;
+     }
+
+     .merit .merit-dots {
+         max-width: 4em;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     .merit span {
+         width: 3em;
+         text-align: left;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .merit .remove-merit {
+         max-width: 4em;
+         padding: 0;
+         padding: 3px;
+         padding-left: 6px;
+         padding-right:6px;
+         margin: 3px;
+         background-color: lightgray;
+     }
     </style>
 
     {# Webpack Templating for API script #}

src/frontend/templates/characters/edit_character_macros.html.tera

@@ -16,6 +16,6 @@
 <div class="merit">
     <input type="text" class="merit-name" value="{{name}}" />
     <input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
-    <button data-event-type="remove-merit">X</button>
+    <button class="remove-merit" data-event-type="remove-merit">X</button>
 </div>
 {% endmacro merit %}