From 086a7e900029decddf46558ee8b2622c2bdc6648 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Mon, 16 Feb 2026 19:00:25 +0100
Subject: [PATCH] =?UTF-8?q?Improve=20mobile=20UI=20=E2=9C=A8=20(#3217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

### Leaderboard cut off

Previous:

<img width="285" height="255" alt="Screenshot 2026-02-15 171617"
src="https://github.com/user-attachments/assets/affb7559-3885-4cc3-bc1a-f653dcb13fb2"
/>

Now:

<img width="302" height="299" alt="Screenshot 2026-02-15 171603"
src="https://github.com/user-attachments/assets/623fe424-d744-46f7-99aa-710b010c4084"
/>

### Attack ratio popup cut off

Previous:

<img width="276" height="806" alt="Screenshot 2026-02-15 171542"
src="https://github.com/user-attachments/assets/2ac0ec19-feea-465a-b04b-323a18309d4d"
/>

Now:

<img width="278" height="807" alt="Screenshot 2026-02-15 171533"
src="https://github.com/user-attachments/assets/7e06aa96-04ba-4454-ba0e-cdaad74f79be"
/>

Also fixed this text overlap problem on boat retreat:

<img width="359" height="192" alt="Screenshot 2026-02-15 172603"
src="https://github.com/user-attachments/assets/e4cef05c-5dc3-4960-ab21-a2f0740e3380"
/>

## 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/AttacksDisplay.ts  |  8 ++--
 src/client/graphics/layers/ControlPanel.ts    | 48 +++++++++----------
 src/client/graphics/layers/GameLeftSidebar.ts |  4 +-
 src/client/graphics/layers/Leaderboard.ts     |  2 +-
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/client/graphics/layers/AttacksDisplay.ts b/src/client/graphics/layers/AttacksDisplay.ts
index 2bca5e1b5..f77411e55 100644
--- a/src/client/graphics/layers/AttacksDisplay.ts
+++ b/src/client/graphics/layers/AttacksDisplay.ts
@@ -297,7 +297,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: attack.retreating,
               })
-            : html`<span class="ml-auto shrink-0 text-blue-400"
+            : html`<span class="ml-auto truncate text-blue-400"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
@@ -334,7 +334,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: landAttack.retreating,
               })
-            : html`<span class="ml-auto shrink-0 text-blue-400"
+            : html`<span class="ml-auto truncate text-blue-400"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
@@ -389,7 +389,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 className: "ml-auto text-left shrink-0",
                 disabled: boat.retreating(),
               })
-            : html`<span class="ml-auto shrink-0 text-blue-400"
+            : html`<span class="ml-auto truncate text-blue-400"
                 >(${translateText("events_display.retreating")}...)</span
               >`}
         </div>
@@ -441,7 +441,7 @@ export class AttacksDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="w-full mb-1 mt-1 sm:mt-0 pointer-events-auto grid grid-cols-2 lg:grid-cols-1 gap-1 text-white text-sm lg:text-base"
+        class="w-full mb-1 mt-1 sm:mt-0 pointer-events-auto grid grid-cols-2 sm:grid-cols-1 gap-1 text-white text-sm lg:text-base"
       >
         ${this.renderOutgoingAttacks()} ${this.renderOutgoingLandAttacks()}
         ${this.renderBoats()} ${this.renderIncomingAttacks()}
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 4400cc990..ce3b43fd0 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -260,7 +260,7 @@ export class ControlPanel extends LitElement implements Layer {
   render() {
     return html`
       <div
-        class="pointer-events-auto ${this._isVisible
+        class="relative pointer-events-auto ${this._isVisible
           ? "relative z-[60] w-full lg:max-w-[400px] text-sm lg:text-base bg-gray-800/70 p-1.5 pr-2 lg:p-5 shadow-lg sm:rounded-tr-lg min-[1200px]:rounded-lg backdrop-blur-xs"
           : "hidden"}"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
@@ -309,7 +309,7 @@ export class ControlPanel extends LitElement implements Layer {
               </div>
             </div>
             <!-- Small red vertical bar indicator -->
-            <div class="relative shrink-0">
+            <div class="shrink-0">
               <div
                 class="w-1.5 h-8 bg-white/20 rounded-full relative overflow-hidden"
               >
@@ -318,32 +318,30 @@ export class ControlPanel extends LitElement implements Layer {
                   style="height: ${this.attackRatio * 100}%"
                 ></div>
               </div>
-              ${this._touchDragging
-                ? html`
-                    <div
-                      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 flex flex-col items-center pointer-events-auto z-[10000] bg-gray-800/80 backdrop-blur-sm rounded-lg p-2 w-12"
-                      style="height: 50vh;"
-                      @touchstart=${(e: TouchEvent) => this.handleBarTouch(e)}
-                    >
-                      <span
-                        class="text-red-400 text-sm font-bold mb-1"
-                        translate="no"
-                        >${(this.attackRatio * 100).toFixed(0)}%</span
-                      >
-                      <div
-                        class="attack-drag-bar flex-1 w-3 bg-white/20 rounded-full relative overflow-hidden"
-                      >
-                        <div
-                          class="absolute bottom-0 w-full bg-red-500 rounded-full"
-                          style="height: ${this.attackRatio * 100}%"
-                        ></div>
-                      </div>
-                    </div>
-                  `
-                : ""}
             </div>
           </div>
         </div>
+        ${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"
+                style="height: 50vh;"
+                @touchstart=${(e: TouchEvent) => this.handleBarTouch(e)}
+              >
+                <span class="text-red-400 text-sm font-bold mb-1" translate="no"
+                  >${(this.attackRatio * 100).toFixed(0)}%</span
+                >
+                <div
+                  class="attack-drag-bar flex-1 w-3 bg-white/20 rounded-full relative overflow-hidden"
+                >
+                  <div
+                    class="absolute bottom-0 w-full bg-red-500 rounded-full"
+                    style="height: ${this.attackRatio * 100}%"
+                  ></div>
+                </div>
+              </div>
+            `
+          : ""}
         <!-- Attack ratio bar (desktop, always visible) -->
         <div class="hidden lg:block mt-2">
           <div
diff --git a/src/client/graphics/layers/GameLeftSidebar.ts b/src/client/graphics/layers/GameLeftSidebar.ts
index 091e6e3df..9fb4a3ace 100644
--- a/src/client/graphics/layers/GameLeftSidebar.ts
+++ b/src/client/graphics/layers/GameLeftSidebar.ts
@@ -108,7 +108,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
   render() {
     return html`
       <aside
-        class=${`fixed top-0 min-[1200px]:top-4 left-0 min-[1200px]:left-4 z-1000 flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-gray-800/70 backdrop-blur-xs shadow-xs min-[1200px]:rounded-lg rounded-br-lg transition-all duration-300 ease-out transform ${
+        class=${`fixed top-0 min-[1200px]:top-4 left-0 min-[1200px]:left-4 z-1000 flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-gray-800/70 backdrop-blur-xs shadow-xs min-[1200px]:rounded-lg rounded-br-lg ${this.isLeaderboardShow || this.isTeamLeaderboardShow ? "max-[400px]:w-full max-[400px]:rounded-none" : ""} transition-all duration-300 ease-out transform ${
           this.isVisible ? "translate-x-0" : "hidden"
         }`}
         style="margin-top: ${this.barOffset}px;"
@@ -185,7 +185,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
             `
           : null}
         <div
-          class=${`block lg:flex flex-wrap ${this.isLeaderboardShow && this.isTeamLeaderboardShow ? "gap-2" : ""}`}
+          class=${`block lg:flex flex-wrap overflow-x-auto min-w-0 w-full ${this.isLeaderboardShow && this.isTeamLeaderboardShow ? "gap-2" : ""}`}
         >
           <leader-board .visible=${this.isLeaderboardShow}></leader-board>
           <team-stats
diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts
index 4dfe4fcae..fa4e495bc 100644
--- a/src/client/graphics/layers/Leaderboard.ts
+++ b/src/client/graphics/layers/Leaderboard.ts
@@ -191,7 +191,7 @@ export class Leaderboard extends LitElement implements Layer {
       >
         <div
           class="grid bg-gray-800/85 w-full text-xs md:text-xs lg:text-sm rounded-lg overflow-hidden"
-          style="grid-template-columns: 30px 100px 70px 55px 105px;"
+          style="grid-template-columns: minmax(24px, 30px) minmax(60px, 100px) minmax(45px, 70px) minmax(40px, 55px) minmax(55px, 105px);"
         >
           <div class="contents font-bold bg-gray-700/60">
             <div class="py-1 md:py-2 text-center border-b border-slate-500">