Improve mobile UI ✨ (#3217)

## 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
2026-06-21 10:53:31 +00:00 · 2026-02-16 19:00:25 +01:00
parent 040766d417
commit 086a7e9000
4 changed files with 30 additions and 32 deletions
@@ -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()}
@@ -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
@@ -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
@@ -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">