From d0cd073b958ef6980c493073abf1b58729544707 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <kallemein@redkiwi.nl>
Date: Sat, 8 Jun 2024 14:05:13 +0200
Subject: [PATCH] NQ-63 truncate character name in select screen and hud

---
 src/components/game/Hud.vue           | 6 ++++++
 src/components/screens/Characters.vue | 8 ++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
index bddffa9..01bb614 100644
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@@ -82,6 +82,12 @@ const socket = useSocketStore();
         span, label {
           font-size: 14px;
         }
+        .player-name {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 125px;
+        }
       }
 
       .player-details {
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 4c794b5..ec1a23c 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -200,10 +200,14 @@ function create() {
         label {
           font-weight: bold;
           position: absolute;
+          left: 50%;
           top: 20px;
-          width: 100%;
-          transform: translateY(-50%);
+          max-width: 130px;
+          transform: translateY(-50%) translateX(-50%);
           text-align: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
         }
 
         button.delete {