From 9e249765de2be3d3a4d9e1596dd65e19a6d3b314 Mon Sep 17 00:00:00 2001
From: Dave <d.garnar@uk.cdw.com>
Date: Sat, 6 Mar 2021 09:34:18 +0000
Subject: [PATCH] final styling changes, making pronouns icon always appear on
 the same side.

---
 src/components/Player.vue     | 11 +++++------
 src/components/TownSquare.vue | 26 ++++++++------------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index e5f7d9c..5dab5f1 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -102,12 +102,9 @@
         @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 !== ''">
+        <font-awesome-icon icon="venus-mars" v-if="player.pronouns" />
+        <div class="pronouns" v-if="player.pronouns">
           <span>{{ player.pronouns }}</span>
         </div>
       </div>
@@ -675,13 +672,15 @@ li.move:not(.from) .player .overlay svg.move {
 
   svg {
     top: 3px;
-    margin-right: 10px;
+    margin-right: 2px;
   }
 
   span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: center;
+    flex-grow: 1;
   }
 
   #townsquare:not(.spectator) &:hover,
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 80a838b..3236102 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -292,24 +292,14 @@ export default {
             left: 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%;
-            }
+        .pronouns {
+          left: 110%;
+          right: auto;
+          &:before {
+            border-left-color: transparent;
+            border-right-color: black;
+            left: auto;
+            right: 100%;
           }
         }
       } @else {