tweaking styles and adding pronouns icon to name bar if the player has pronouns set, made the name bar slighlty wider to allow for the same number of charachtersfor this and moved the player menu slightly to account for it.

src/components/Player.vue

@@ -102,6 +102,10 @@
         @click="isMenuOpen = !isMenuOpen"
         :class="{ active: isMenuOpen }"
       >
+        <font-awesome-icon
+          icon="venus-mars"
+          v-if="player.pronouns && player.pronouns !== ''"
+        />
         <span>{{ player.name }}</span>
         <div class="pronouns" v-if="player.pronouns && player.pronouns !== ''">
           <span>{{ player.pronouns }}</span>
@@ -652,13 +656,14 @@ li.move:not(.from) .player .overlay svg.move {
 
 /***** Player name *****/
 .player > .name {
-  display: inline-flex;
+  right: 10%;
+  display: flex;
   justify-content: center;
   font-size: 120%;
   line-height: 120%;
   cursor: pointer;
   white-space: nowrap;
-  width: 100%;
+  width: 120%;
   background: rgba(0, 0, 0, 0.5);
   border: 3px solid black;
   border-radius: 10px;
@@ -666,6 +671,11 @@ li.move:not(.from) .player .overlay svg.move {
   box-shadow: 0 0 5px black;
   padding: 0 4px;
 
+  svg {
+    top: 3px;
+    margin-right: 10px;
+  }
+
   span {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -683,9 +693,9 @@ li.move:not(.from) .player .overlay svg.move {
   }
 
   .pronouns {
-    display: inline-flex;
+    display: flex;
     position: absolute;
-    right: 120%;
+    right: 110%;
     max-width: 250px;
     z-index: 25;
     background: rgba(0, 0, 0, 0.5);
@@ -696,6 +706,8 @@ li.move:not(.from) .player .overlay svg.move {
     pointer-events: none;
     opacity: 0;
     transition: opacity 200ms ease-in-out;
+    padding: 0 4px;
+    bottom: -3px;
 
     &:before {
       content: " ";
@@ -717,7 +729,7 @@ li.move:not(.from) .player .overlay svg.move {
 /***** Player menu *****/
 .player > .menu {
   position: absolute;
-  left: 100%;
+  left: 110%;
   bottom: -5px;
   text-align: left;
   white-space: nowrap;

src/components/TownSquare.vue

@@ -264,7 +264,7 @@ export default {
         // open menu on the left
         .player > .menu {
           left: auto;
-          right: 100%;
+          right: 110%;
           margin-right: 15px;
           &:before {
             border-left-color: black;
@@ -293,14 +293,23 @@ export default {
           }
         }
 
-        .pronouns {
-          left: 120%;
-          right: auto;
-          &:before {
-            border-left-color: transparent;
-            border-right-color: black;
-            left: auto;
-            right: 100%;
+        .name {
+          flex-direction: row-reverse;
+
+          svg {
+            margin-left: 10px;
+            margin-right: 2px;
+          }
+
+          .pronouns {
+            left: 110%;
+            right: auto;
+            &:before {
+              border-left-color: transparent;
+              border-right-color: black;
+              left: auto;
+              right: 100%;
+            }
           }
         }
       } @else {