Fix Player Name Monospaced Text Overflow on PlayerInfo (#975)

## Description:
This PR addresses the issue of long continuous strings (without spaces)
overflowing their container in the user interface. By adding the CSS
property word-break: break-all (via the Tailwind class break-all) to the
text container, we ensure that lengthy words will wrap properly and
maintain the layout integrity across different screen sizes.


![image](https://github.com/user-attachments/assets/358c0871-a9b8-4828-8401-610acd7eb242)
_Before_



![image](https://github.com/user-attachments/assets/d6c820de-f2bf-479a-90c9-54eec51b4425)
_After_


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

RTHOne

Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -201,7 +201,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div class="p-2">
         <div
-          class="text-bold text-sm lg:text-lg font-bold mb-1 inline-flex ${isFriendly
+          class="text-bold text-sm lg:text-lg font-bold mb-1 inline-flex break-all ${isFriendly
             ? "text-green-500"
             : "text-white"}"
         >