From 4c44da49401f9a1beba3dd28719e83c851a62b94 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Mon, 16 Feb 2026 21:56:50 +0100
Subject: [PATCH] =?UTF-8?q?Adjust=20styling=20for=20attack=20ratio=20popup?=
 =?UTF-8?q?=20and=20event=20display=20button=20=E2=9C=A8=20(#3225)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Before:

<img width="445" height="501" alt="Screenshot 2026-02-16 205903"
src="https://github.com/user-attachments/assets/3add2b1c-f108-4138-9066-ce16ce9fb76d"
/>

After:

<img width="484" height="515" alt="Screenshot 2026-02-16 210819"
src="https://github.com/user-attachments/assets/cb7ba559-535e-4e87-a4b2-4bf744b98e6e"
/>

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

FloPinguin
---
 src/client/graphics/layers/ControlPanel.ts  | 2 +-
 src/client/graphics/layers/EventsDisplay.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index ce3b43fd0..8aeb8d415 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -324,7 +324,7 @@ export class ControlPanel extends LitElement implements Layer {
         ${this._touchDragging
           ? html`
               <div
-                class="absolute bottom-full right-0 flex flex-col items-center pointer-events-auto z-[10000] bg-gray-800/80 backdrop-blur-sm rounded-l-lg sm:rounded-lg p-2 w-12"
+                class="absolute bottom-full right-0 flex flex-col items-center pointer-events-auto z-[10000] bg-gray-800/70 backdrop-blur-xs rounded-tl-lg sm:rounded-lg p-2 w-12"
                 style="height: 50vh;"
                 @touchstart=${(e: TouchEvent) => this.handleBarTouch(e)}
               >
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 2cc0210a7..a84e76205 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -799,7 +799,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 `,
                 onClick: this.toggleHidden,
                 className:
-                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
+                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg max-sm:rounded-tr-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
               })}
             </div>
           `