3 files changed, 33 insertions(+), 1 deletions(-)

M starkingdoms-client/index.html
M starkingdoms-client/src/css/log.css
M starkingdoms-client/src/packet_ui.ts

@@ 39,9 39,17 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and 
     </form>
 </div>
 
-<div class="popup popup-wmin log-hidden" id="packet_log">
+<div class="popup popup-wmin log-hidden log-container" id="packet_log">
     <h1>Packet Log</h1>
     <table class="log">
+        <thead>
+            <tr class="log-wfull">
+                <th class="log-wfull log-lalign log-header log-w50">#</th>
+                <th class="log-wfull log-lalign log-header">Dir</th>
+                <th class="log-wfull log-lalign log-header log-w240">Type</th>
+                <th class="log-wfull log-lalign log-header">Delta</th>
+            </tr>
+        </thead>
         <tbody id="log_body">
 
         </tbody>

@@ 16,6 16,8 @@
     display: block;
     max-height: 200px;
     overflow: auto;
+    width: 100%;
+    table-layout: fixed;
 }
 .log-selected {
     background-color: #204e8a;


@@ 33,3 35,21 @@
 .log-hidden {
     display: none;
 }
+#log_body {
+    width: 100%;
+}
+.log-container {
+    width: 350px;
+}
+.log-header {
+    padding: 5px;
+}
+.log-w240 {
+    width: 240px;
+}
+.log-w50 {
+    width: 50px;
+}
+.log-td {
+    padding: 5px;
+}<
\ No newline at end of file

@@ 147,19 147,23 @@ export function appendPacket(packet: Packet) {
 
     let td_idx = document.createElement("td");
     td_idx.innerHTML = index.toString();
+    td_idx.classList.add("log-td");
     tr.appendChild(td_idx);
 
     let td_direction = document.createElement("td");
     td_direction.innerHTML = type_direction(packet.t) == Direction.Clientbound ? down_arrow : up_arrow;
+    td_direction.classList.add("log-td");
     tr.appendChild(td_direction);
 
     let td_type = document.createElement("td");
     td_type.innerHTML = packet.t;
+    td_type.classList.add("log-td");
     tr.appendChild(td_type);
 
     let td_ts = document.createElement("td");
     td_ts.innerHTML = duration;
     td_ts.classList.add(type_direction(packet.t) == Direction.Clientbound ? "log-arriving" : "log-leaving")
+    td_ts.classList.add("log-td");
     tr.appendChild(td_ts);
 
     tr.addEventListener("click", () => {