From 53b45eeea72159e2d6e6c0091bf395b0d27d4b68 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@unterdemradar.de>
Date: Sat, 8 Jan 2022 17:05:35 +0100
Subject: [PATCH] updated table layout

---
 index.html   | 15 ++++++++-------
 js/sr2ini.js |  9 +++++----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 26b9e84..26c71eb 100644
--- a/index.html
+++ b/index.html
@@ -27,13 +27,13 @@
 			<table class="table table-sm table-hover " id="combatants">
 				<thead>
 					<tr id="combatants-headrow">
-						<th title="Initiative">Initiative</th>
-						<th title="Name">Name</th>
-						<th></th>
+						<th class="col-5" title="Initiative">Initiative</th>
+						<th class="col-6" title="Name">Name</th>
+						<th class="col-1"></th>
 					</tr>
 				</thead>
 
-				<tbody id="sortable">
+				<tbody class="align-middle" id="sortable">
 					<tr class="table-active" id="formRow">
 						<form name="combForm" id="combForm" onsubmit="return false;">
 							<td>
@@ -42,10 +42,11 @@
 							<td>
 								<input type="text" maxlength="40" class="form-control" id="combName" placeholder="new combatant's name" required />
 							</td>
-							<td width="50px">
-								<button type="button" class="btn btn-primary btn-sm" id="combAddButton" title="Add combatant to fight">Add</button>
+							<td>
+								<div class="btn-group d-flex">
+									<button type="button" class="btn btn-secondary" id="combAddButton" title="Add combatant to fight">Add</button>
+								</div>
 							</td>
-							<td width="80px"/>
 						</form>
 					</tr>
 				</tbody>
diff --git a/js/sr2ini.js b/js/sr2ini.js
index f296f9c..3ae1635 100644
--- a/js/sr2ini.js
+++ b/js/sr2ini.js
@@ -138,10 +138,11 @@ console.log("Ini is: " + ini);
 			'<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>',
 			'<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>',
 			'<td>',
-				'<button type="button" class="btn btn-sm btn-secondary act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>',
-			'</td>',
-			'<td>',
-				'<button type="button" class="btn btn-sm btn-danger remove-button" title="Remove combatant">Remove</button>',
+				'<div class="btn-group d-flex">',
+					'<button type="button" class="btn btn-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>',
+					'&nbsp;',
+					'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>',
+				'</div>',
 			'</td>',
 		'</tr>'].join("") 
 	));