fix: swap team text and buttons position; fix gap space on leaderboard (#3135)

## Description:

1. Swaps the position of the teams text and leaderboard buttons;
2. Edits the text and button margins
3. Fixes spacing bug where because of a "gap-2", if only one leaderboard
is open, there's empty space on the left or right of the leaderboard.
4. Small code refactor proposed by code rabbit / icon description

Button swap and spacing changes were suggested by:
@FloPinguin  @ryanbarlow97  

## 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

***
Screenshots:
Before swapping the position and editing the spacing:
<img width="242" height="151" alt="image"
src="https://github.com/user-attachments/assets/cf196842-b469-45ab-a685-0a5e56b56378"
/>

After swapping the position and editing the spacing: ✔️
<img width="233" height="149" alt="image"
src="https://github.com/user-attachments/assets/c88da4ec-0f23-4670-af5d-fce4124d4936"
/>

Before swapping the position and editing the spacing without the text:
<img width="528" height="398" alt="image"
src="https://github.com/user-attachments/assets/e1e31352-31d1-42a4-ad92-a60b0014b779"
/>

After swapping the position and editing the spacing without the text: ✔️
<img width="514" height="350" alt="image"
src="https://github.com/user-attachments/assets/6a1f2391-e2f1-478e-bada-9436b7cb2e13"
/>

Before fixing the spacing on mobile:
<img width="579" height="158" alt="image"
src="https://github.com/user-attachments/assets/8d5e225b-6dbd-4a07-afeb-97035000a09d"
/>

After fixing the spacing on mobile: ✔️
<img width="575" height="134" alt="image"
src="https://github.com/user-attachments/assets/f9016060-ac9e-47fc-8886-e3eee6359906"
/>

Before fixing the leaderboard space issue:
<img width="511" height="398" alt="image"
src="https://github.com/user-attachments/assets/0fadddcd-2c5f-4caf-b641-c7a3e19a5a14"
/>

<img width="511" height="398" alt="image"
src="https://github.com/user-attachments/assets/2a9a9f7d-e08d-4908-b2d1-f26500c4c602"
/>

<img width="585" height="204" alt="image"
src="https://github.com/user-attachments/assets/9dbb4c51-56ae-4e7a-b603-f49cd1dc2286"
/>

After fixing the leaderboard space issue: ✔️
<img width="533" height="463" alt="image"
src="https://github.com/user-attachments/assets/c0608e83-974a-4950-94cd-896bc7dd7720"
/>

##Discord username: martoi

***
Signed-off-by: MartinIvovIv <https://github.com/martinIvovIv>

resources/lang/en.json

@@ -187,7 +187,9 @@
     "icon_request": "Envelope - Alliance request. This player has sent you an alliance request.",
     "info_enemy_panel": "Enemy info panel",
     "exit_confirmation": "Are you sure you want to exit the game?",
-    "bomb_direction": "Atom / Hydrogen bomb arc direction"
+    "bomb_direction": "Atom / Hydrogen bomb arc direction",
+    "icon_alt_player_leaderboard": "Player Leaderboard Icon",
+    "icon_alt_team_leaderboard": "Team Leaderboard Icon"
   },
   "single_modal": {
     "title": "Solo",

src/client/graphics/layers/GameLeftSidebar.ts

@@ -16,8 +16,11 @@ export class GameLeftSidebar extends LitElement implements Layer {
   private isLeaderboardShow = false;
   @state()
   private isTeamLeaderboardShow = false;
+  @state()
   private isVisible = false;
+  @state()
   private isPlayerTeamLabelVisible = false;
+  @state()
   private playerTeam: string | null = null;
 
   private playerColor: Colord = new Colord("#FFFFFF");
@@ -59,7 +62,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
       this.requestUpdate();
     }
 
-    if (!this.game.inSpawnPhase()) {
+    if (!this.game.inSpawnPhase() && this.isPlayerTeamLabelVisible) {
       this.isPlayerTeamLabelVisible = false;
       this.requestUpdate();
     }
@@ -91,27 +94,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
           this.isVisible ? "translate-x-0" : "hidden"
         }`}
       >
-        ${this.isPlayerTeamLabelVisible
-          ? html`
-              <div
-                class="flex items-center w-full h-8 lg:h-10 text-white py-1 lg:p-2"
-                @contextmenu=${(e: Event) => e.preventDefault()}
-              >
-                ${translateText("help_modal.ui_your_team")}
-                <span
-                  style="--color: ${this.playerColor.toRgbString()}"
-                  class="text-(--color)"
-                >
-                  &nbsp;${this.getTranslatedPlayerTeamLabel()} &#10687;
-                </span>
-              </div>
-            `
-          : null}
-        <div
-          class=${`flex items-center gap-4 lg:gap-6 xl:gap-8 text-white ${this.isTeamGame ? "ml-8" : ""} ${
-            this.isLeaderboardShow || this.isTeamLeaderboardShow ? "mb-2" : ""
-          }`}
-        >
+        <div class="flex items-center gap-4 xl:gap-6 text-white">
           <div
             class="cursor-pointer p-0.5 bg-gray-700/50 hover:bg-gray-600 border rounded-md border-slate-500 transition-colors"
             @click=${this.toggleLeaderboard}
@@ -119,6 +102,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
             tabindex="0"
             @keydown=${(e: KeyboardEvent) => {
               if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+                e.preventDefault();
                 this.toggleLeaderboard();
               }
             }}
@@ -127,7 +111,8 @@ export class GameLeftSidebar extends LitElement implements Layer {
               src=${this.isLeaderboardShow
                 ? leaderboardSolidIcon
                 : leaderboardRegularIcon}
-              alt="treeIcon"
+              alt=${translateText("help_modal.icon_alt_player_leaderboard") ||
+              "Player Leaderboard Icon"}
               width="20"
               height="20"
             />
@@ -145,6 +130,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
                       e.key === " " ||
                       e.code === "Space"
                     ) {
+                      e.preventDefault();
                       this.toggleTeamLeaderboard();
                     }
                   }}
@@ -153,7 +139,9 @@ export class GameLeftSidebar extends LitElement implements Layer {
                     src=${this.isTeamLeaderboardShow
                       ? teamSolidIcon
                       : teamRegularIcon}
-                    alt="treeIcon"
+                    alt=${translateText(
+                      "help_modal.icon_alt_team_leaderboard",
+                    ) || "Team Leaderboard Icon"}
                     width="20"
                     height="20"
                   />
@@ -161,7 +149,25 @@ export class GameLeftSidebar extends LitElement implements Layer {
               `
             : null}
         </div>
-        <div class="block lg:flex flex-wrap gap-2">
+        ${this.isPlayerTeamLabelVisible
+          ? html`
+              <div
+                class="flex items-center w-full text-white"
+                @contextmenu=${(e: Event) => e.preventDefault()}
+              >
+                ${translateText("help_modal.ui_your_team")}
+                <span
+                  style="--color: ${this.playerColor.toRgbString()}"
+                  class="text-(--color)"
+                >
+                  &nbsp;${this.getTranslatedPlayerTeamLabel()} &#10687;
+                </span>
+              </div>
+            `
+          : null}
+        <div
+          class=${`block lg:flex flex-wrap ${this.isLeaderboardShow && this.isTeamLeaderboardShow ? "gap-2" : ""}`}
+        >
           <leader-board .visible=${this.isLeaderboardShow}></leader-board>
           <team-stats
             class="flex-1"

src/client/graphics/layers/Leaderboard.ts

@@ -177,7 +177,7 @@ export class Leaderboard extends LitElement implements Layer {
     }
     return html`
       <div
-        class="max-h-[35vh] overflow-y-auto text-white text-xs md:text-xs lg:text-sm md:max-h-[50vh]  ${this
+        class="max-h-[35vh] overflow-y-auto text-white text-xs md:text-xs lg:text-sm md:max-h-[50vh] mt-2 ${this
           .visible
           ? ""
           : "hidden"}"

src/client/graphics/layers/TeamStats.ts

@@ -132,7 +132,7 @@ export class TeamStats extends LitElement implements Layer {
 
     return html`
       <div
-        class="max-h-[30vh] overflow-y-auto grid bg-slate-800/70 w-full text-white text-xs md:text-sm"
+        class="max-h-[30vh] overflow-y-auto grid bg-slate-800/70 w-full text-white text-xs md:text-sm mt-2"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div