From 289e246162eb96d317ba77d2d1a91d88ff3f5588 Mon Sep 17 00:00:00 2001
From: Martin I <33766476+martinIvovIv@users.noreply.github.com>
Date: Fri, 6 Feb 2026 18:42:41 +0100
Subject: [PATCH] fix: spacing between team leaderboard buttons (#3101)

## Description:

In team games, the UI buttons for the leaderboard and the team
leaderboard look out of place.
A bit of tailwind css fixes the look and a making the gap window
specific makes the accessibility better.

## 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 change:
<img width="218" height="130" alt="image"
src="https://github.com/user-attachments/assets/e7366435-c3d3-44b9-af5f-05a1548bf743"
/>

After change:
<img width="393" height="277" alt="image"
src="https://github.com/user-attachments/assets/86dcb614-dd30-48f9-9048-fcb892a5dbae"
/>

Befre change with open leaderboard:
<img width="491" height="211" alt="image"
src="https://github.com/user-attachments/assets/4313fb89-8a61-4892-8c28-0c0d82bcc03b"
/>

After change with open leaderboard:
<img width="531" height="251" alt="image"
src="https://github.com/user-attachments/assets/9b4e2ed5-8427-4a7a-84dc-69169f53b031"
/>

Mobile before change:
<img width="535" height="180" alt="image"
src="https://github.com/user-attachments/assets/f6cc87be-1f7f-4bc7-bb1d-9afcce45ff6d"
/>

Mobile after change:
<img width="469" height="199" alt="image"
src="https://github.com/user-attachments/assets/ac4baa9d-4051-4938-a0a1-53d38efea7a8"
/>

Mobile before change with open leaderboard:
<img width="501" height="195" alt="image"
src="https://github.com/user-attachments/assets/a086cdd8-7898-4e13-a679-04b63be7a67b"
/>

Mobile after change with open leaderboard:
<img width="446" height="238" alt="image"
src="https://github.com/user-attachments/assets/8cc9c833-b8f9-43bb-9664-8cfb9f608cc4"
/>


Discord username: martoi

***
Signed-off-by: MartinIvovIv <https://github.com/martinIvovIv>
---
 src/client/graphics/layers/GameLeftSidebar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/graphics/layers/GameLeftSidebar.ts b/src/client/graphics/layers/GameLeftSidebar.ts
index 81a42421c..351d839a2 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 {
             `
           : null}
         <div
-          class=${`flex items-center gap-2 text-white ${
+          class=${`flex items-center gap-4 lg:gap-6 xl:gap-8 text-white ${this.isTeamGame ? "ml-8" : ""} ${
             this.isLeaderboardShow || this.isTeamLeaderboardShow ? "mb-2" : ""
           }`}
         >