From 1e629ca53131239e82b0bc6a75e0ecb9f23d96da Mon Sep 17 00:00:00 2001
From: Wraith <54374743+wraith4081@users.noreply.github.com>
Date: Sat, 17 Jan 2026 23:37:17 +0300
Subject: [PATCH] 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 | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/client/graphics/layers/PerformanceOverlay.ts b/src/client/graphics/layers/PerformanceOverlay.ts
index 50a782e10..564e94997 100644
--- a/src/client/graphics/layers/PerformanceOverlay.ts
+++ b/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}">