3 files changed, 44 insertions(+), 21 deletions(-)

M starkingdoms-client/index.html
M starkingdoms-client/src/css/hud.css
M starkingdoms-client/src/css/popup.css

@@ 74,23 74,31 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and 
             <input placeholder="Enter message or command here..." class="chat-box" id="chatentry" required autocomplete="off"/>
         </div>
 
-        <div class="popup hud hidden popup-max-width-300" id="hud">
-            <table>
-                <thead>
-                    <tr>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td id="pos">Position: --, --</td>
-                        <td id="velocity">Velocity: --</td>
-                        <td id="track">Track Angle: --</td>
-                    </tr>
-                </tbody>
-            </table>
+        <div class="hud hidden" id="hud">
+            <div class="popup" id="hud-content-wrapper">  
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="hud-d">Position</th>
+                            <th class="hud-d">Velocity</th>
+                            <th class="hud-d">Track Angle</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                          <td id="pos">
+                              <span id="pos-val-x">--</span>, <span id="pos-val-y">--</span>
+                          </td>
+                          <td id="velocity">
+                              <span id="velocity-val">--</span>
+                          </td>
+                          <td id="track">
+                              <span id="track-val">--</span>
+                          </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
 
         <span class="footer-left" id="footer-left"></span>

@@ 1,12 1,26 @@
 .hud {
     position: absolute;
-    left: 50%;
     bottom: 10px;
-    transform: translate(-50%);
     margin: 0 0;
-    width: 25vw;
-    min-width: 640px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
+
+#hud-content-wrapper {
+    width: min(100vw, 620px);
+    gap: 16px;
+}
+
+#hud-content-wrapper > table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+#hud-content-wrapper td {
+    text-align: center;
+}
+
 .hud-d {
     margin-left: 5px;
     margin-right: 5px;

@@ 31,4 31,5 @@
 }
 .hidden {
     display: none;
+    visibility: hidden;
 }