data-checkbox="modalBio"
   )
     .card
-      div(v-if="st.user.id == id")
+      div(v-if="st.user.id > 0 && st.user.id == uid")
         h3.section(@click="modeEdit = !modeEdit") Click to edit
         textarea(
-          v-if="userBio !== undefined"
-          v-show="modeEdit"
+          v-if="userBio !== undefined && modeEdit"
           v-model="userBio"
         )
         button#submitBtn(@click="sendBio()") Submit
         @click="modeEdit = !modeEdit"
       )
       #dialog.text-center {{ st.tr[infoMsg] }}
-  span.clickable(@click="showBio()") {{ name }}
+  span(
+    :class="{ clickable: !!uname }"
+    @click="showBio()"
+  )
+    | {{ uname || "@nonymous" }}
 </template>
 
 <script>
 import { processModalClick } from "@/utils/modalClick.js";
 export default {
   name: "my-user-bio",
-  props: ["id", "name"],
+  props: ["uid", "uname"],
   data: function() {
     return {
       st: store.state,
   },
   methods: {
     showBio: function() {
+      if (!this.uname)
+        // Anonymous users have no bio:
+        return;
       this.infoMsg = "";
       document.getElementById("modalBio").checked = true;
       if (this.userBio === undefined) {
           "/userbio",
           "GET",
           {
-            data: { id: this.id },
+            data: { id: this.uid },
             success: (res) => {
               this.userBio = res.bio;
             }
 
 <style lang="sass" scoped>
 [type="checkbox"].modal+div .card
-  max-width: 768px
+  max-width: 570px
   max-height: 100%
 
 #submitBtn
 
         img(src="/images/icons/rematch.svg")
       #playersInfo
         div(v-if="isLargeScreen()")
-          span.name(:class="{connected: isConnected(0)}")
-            | {{ game.players[0].name || "@nonymous" }}
+          UserBio.user-bio(
+            :class="{connected: isConnected(0)}"
+            :uid="game.players[0].id"
+            :uname="game.players[0].name"
+          )
           span.time(
             v-if="game.score=='*'"
             :class="{yourturn: !!vr && vr.turn == 'w'}"
             span.time-right(v-if="!!virtualClocks[0][1]")
               | {{ virtualClocks[0][1] }}
           span.split-names -
-          span.name(:class="{connected: isConnected(1)}")
-            | {{ game.players[1].name || "@nonymous" }}
+          UserBio.user-bio(
+            :class="{connected: isConnected(1)}"
+            :uid="game.players[1].id"
+            :uname="game.players[1].name"
+          )
           span.time(
             v-if="game.score=='*'"
             :class="{yourturn: !!vr && vr.turn == 'b'}"
             span.time-right(v-if="!!virtualClocks[1][1]")
               | {{ virtualClocks[1][1] }}
         div(v-else)
-          span.name(:class="{connected: isConnected(0)}")
-            | {{ game.players[0].name || "@nonymous" }}
+          UserBio.user-bio(
+            :class="{connected: isConnected(0)}"
+            :uid="game.players[0].id"
+            :uname="game.players[0].name"
+          )
           span.split-names -
-          span.name(:class="{connected: isConnected(1)}")
-            | {{ game.players[1].name || "@nonymous" }}
+          UserBio.user-bio(
+            :class="{connected: isConnected(1)}"
+            :uid="game.players[1].id"
+            :uname="game.players[1].name"
+          )
           div(v-if="game.score=='*'")
             span.time(:class="{yourturn: !!vr && vr.turn == 'w'}")
               span.time-left {{ virtualClocks[0][0] }}
 
 <script>
 import BaseGame from "@/components/BaseGame.vue";
+import UserBio from "@/components/UserBio.vue";
 import Chat from "@/components/Chat.vue";
 import { store } from "@/store";
 import { GameStorage } from "@/utils/gameStorage";
   name: "my-game",
   components: {
     BaseGame,
-    Chat
+    Chat,
+    UserBio
   },
   data: function() {
     return {
 #aboveBoard
   text-align: center
 
+.user-bio
+  display: inline
+  font-size: 1.5rem
+  @media screen and (max-width: 767px)
+    font-size: 1.2rem
+  padding: 0 3px
+
 .variant-cadence
   padding-right: 10px
 
   padding: 0
   width: 10px
 
-span.name
-  font-size: 1.5rem
-  @media screen and (max-width: 767px)
-    font-size: 1.2rem
-  padding: 0 3px
-
 span.time
   font-size: 2rem
   @media screen and (max-width: 767px)