feat: move health to right

src/commands/replay.tsx

@@ -253,19 +253,12 @@ async function playerListing(
   return (
     <div
       key={player.entity_id}
-      style={{
-        backgroundColor: theme.colors[`appBackground2${blockAccent}`],
-        padding: 8,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 8,
-      }}
-    >
-      <div
       style={{
         display: 'flex',
         alignItems: 'center',
         gap: 8,
+        backgroundColor: theme.colors[`appBackground2${blockAccent}`],
+        padding: 8,
       }}
     >
       <div
@@ -342,20 +335,21 @@ async function playerListing(
         {stat(player.exp.toLocaleString())}
         {stat(player.enemies_destroyed, 1)}
       </div>
-      </div>
 
       <div
         style={{
-          height: 4,
           borderRadius: 2,
           backgroundColor: theme.colors[`componentInteractive${healthAccent}`],
           display: 'flex',
+          width: 4,
+          height: '100%',
+          transform: 'scaleY(-1)',
         }}
       >
         <div
           style={{
-            width: `${healthLeft * 100}%`,
+            width: '100%',
-            height: '100%',
+            height: `${healthLeft * 100}%`,
             borderRadius: 2,
             backgroundColor: theme.colors[`solidBackground${healthAccent}`],
           }}