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

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