From 596bc90134280d906e3ad4527aee836b9a21d2f1 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Wed, 4 Feb 2026 00:16:17 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20the=20new=20mobile=20styles=20a=20bit=20?=
 =?UTF-8?q?=F0=9F=96=8C=EF=B8=8F=20(#3106)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

### 1. PlayerInfoOverlay had less margin top than the leaderboard and
the game controls. Fixed.

### 2. PlayerInfoOverlay  did overlap with HeadsUpMessage. Fixed.

Previous:

<img width="543" height="174" alt="Screenshot 2026-02-03 184835"
src="https://github.com/user-attachments/assets/8687294b-feb6-409d-995a-971986a9d406"
/>

Now:

<img width="510" height="299" alt="Screenshot 2026-02-03 185117"
src="https://github.com/user-attachments/assets/8b81f5ed-98ea-4154-b485-9de4ed974939"
/>

### 3. Fixed border radius of the lower panels

Previous:

<img width="1200" height="162" alt="Screenshot 2026-02-03 184938"
src="https://github.com/user-attachments/assets/72dc77c4-8992-4812-8b5d-e100e16fe91e"
/>

<img width="1081" height="122" alt="Screenshot 2026-02-03 185014"
src="https://github.com/user-attachments/assets/0291e305-faed-41d2-b5a9-db795b61a8d2"
/>

Now:

<img width="1237" height="151" alt="Screenshot 2026-02-03 184953"
src="https://github.com/user-attachments/assets/40565ab4-cdad-4ea6-81e5-f24d485c7199"
/>

<img width="1054" height="99" alt="Screenshot 2026-02-03 185004"
src="https://github.com/user-attachments/assets/ce091c16-74ac-4a05-8843-8493e08ba6c3"
/>

### 4. Give PlayerInfoOverlay the same gap between gold icon and gold
text as in ControlPanel

Previous:

<img width="772" height="759" alt="Screenshot 2026-02-03 191150"
src="https://github.com/user-attachments/assets/49b14025-9d28-447d-9370-64ad30532abd"
/>

Now:

<img width="803" height="748" alt="Screenshot 2026-02-03 191203"
src="https://github.com/user-attachments/assets/b4749557-bf10-4643-83b1-5e9d22f122ed"
/>

## 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     | 6 ++++--
 src/client/graphics/layers/HeadsUpMessage.ts    | 2 +-
 src/client/graphics/layers/PlayerInfoOverlay.ts | 4 ++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index c6f000405..c45a31b00 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -261,7 +261,7 @@ export class ControlPanel extends LitElement implements Layer {
     return html`
       <div
         class="pointer-events-auto ${this._isVisible
-          ? "relative z-[60] w-full max-lg:landscape:fixed max-lg:landscape:bottom-0 max-lg:landscape:left-0 max-lg:landscape:w-1/2 max-lg:landscape:z-50 lg:max-w-[400px] text-sm lg:text-base bg-gray-800/70 p-1.5 pr-2 lg:p-5 shadow-lg lg:rounded-xl backdrop-blur-sm"
+          ? "relative z-[60] w-full max-lg:landscape:fixed max-lg:landscape:bottom-0 max-lg:landscape:left-0 max-lg:landscape:w-1/2 max-lg:landscape:z-50 lg:max-w-[400px] text-sm lg:text-base bg-gray-800/70 p-1.5 pr-2 lg:p-5 shadow-lg lg:rounded-tr-xl min-[1200px]:rounded-xl backdrop-blur-sm"
           : "hidden"}"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index db68fe987..3d0bad609 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -1038,7 +1038,9 @@ export class EventsDisplay extends LitElement implements Layer {
               class="relative w-full min-[1200px]:bottom-4 min-[1200px]:right-4 z-50 min-[1200px]:w-96 backdrop-blur-sm"
             >
               <!-- Button Bar -->
-              <div class="w-full p-2 lg:p-3 bg-gray-800/70 rounded-t-lg">
+              <div
+                class="w-full p-2 lg:p-3 bg-gray-800/70 min-[1200px]:rounded-t-lg lg:rounded-tl-lg"
+              >
                 <div class="flex justify-between items-center">
                   <div class="flex gap-4">
                     ${this.renderToggleButton(
@@ -1081,7 +1083,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
               <!-- Content Area -->
               <div
-                class="bg-gray-800/70 max-h-[30vh] overflow-y-auto w-full h-full sm:rounded-b-lg events-container"
+                class="bg-gray-800/70 max-h-[30vh] overflow-y-auto w-full h-full min-[1200px]:rounded-b-xl events-container"
               >
                 <div>
                   <table
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
index cdb69b2a4..0239e2f15 100644
--- a/src/client/graphics/layers/HeadsUpMessage.ts
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -126,7 +126,7 @@ export class HeadsUpMessage extends LitElement implements Layer {
         ${this.isVisible
           ? html`
               <div
-                class="fixed top-[10%] left-1/2 -translate-x-1/2 z-[11000]
+                class="fixed top-[15%] 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
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index db1ee65df..b8e153a70 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -280,7 +280,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         <!-- Left: Gold & Troop bar -->
         <div class="flex flex-col gap-1 shrink-0 w-28">
           <div
-            class="flex items-center justify-center p-1 border rounded-md border-yellow-400 font-bold text-yellow-400 text-xs w-28"
+            class="flex items-center justify-center p-1 border rounded-md border-yellow-400 font-bold text-yellow-400 text-xs w-28 lg:gap-1"
             translate="no"
           >
             <img src=${goldCoinIcon} width="13" height="13" />
@@ -452,7 +452,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 lg:top-[10px] left-0 right-0 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 z-[1001]"
+        class="fixed top-0 lg:top-4 left-0 right-0 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 z-[1001]"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div