fix: performance overlay positioning (#2943)

## Description:

fix: performance overlay positioning

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

wraith4081

src/client/graphics/layers/PerformanceOverlay.ts

@@ -80,9 +80,9 @@ export class PerformanceOverlay extends LitElement implements Layer {
   static styles = css`
     .performance-overlay {
       position: fixed;
-      top: 20px;
-      left: 50%;
-      transform: translateX(-50%);
+      top: var(--top, 20px);
+      left: var(--left, 50%);
+      transform: var(--transform, translateX(-50%));
       background: rgba(0, 0, 0, 0.8);
       color: white;
       padding: 8px 16px;
@@ -551,10 +551,9 @@ export class PerformanceOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="performance-overlay ${this.isDragging
-          ? "dragging"
-          : ""} transform-none left-(--left) top-(--top)"
-        style="--left: ${this.position.x}; --top: ${this.position.y};"
+        class="performance-overlay ${this.isDragging ? "dragging" : ""}"
+        style="--left: ${this.position.x}px; --top: ${this.position
+          .y}px; --transform: none;"
         @mousedown="${this.handleMouseDown}"
       >
         <button class="reset-button" @click="${this.handleReset}">