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/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()}