UI refinements (#2859)

## Description:

UI Refinements requested by @evanpelle  check https://ui.openfront.dev

## 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

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

w.o.n

src/client/graphics/layers/HeadsUpMessage.ts

@@ -126,10 +126,13 @@ export class HeadsUpMessage extends LitElement implements Layer {
         ${this.isVisible
           ? html`
               <div
-                class="flex items-center relative
-                            w-full justify-evenly h-8 lg:h-10 md:top-17.5 left-0 lg:left-4
+                class="fixed top-[10%] left-1/2 -translate-x-1/2 z-[11000]
+                            inline-flex items-center justify-center h-8 lg:h-10
+                            w-fit max-w-[90vw]
                             bg-gray-900/60 rounded-md lg:rounded-lg
-                            backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
+                            backdrop-blur-md text-white text-md lg:text-xl px-3 lg:px-4
+                            text-center break-words"
+                style="word-wrap: break-word; hyphens: auto;"
                 @contextmenu=${(e: MouseEvent) => e.preventDefault()}
               >
                 ${this.getMessage()}

src/client/graphics/layers/SettingsModal.ts

@@ -187,7 +187,7 @@ export class SettingsModal extends LitElement implements Layer {
 
     return html`
       <div
-        class="modal-overlay fixed inset-0 bg-black/50 backdrop-blur-xs z-2000 flex items-center justify-center p-4"
+        class="modal-overlay fixed inset-0 bg-black/60 backdrop-blur-xs z-2000 flex items-center justify-center p-4"
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <div