From ab53ee687ff2a8d555f80d2a00c3e8de05f51ae1 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Thu, 27 Nov 2025 04:50:58 +0100
Subject: [PATCH] =?UTF-8?q?Alliance=20icon=20does=20no=20longer=20stretch/?=
 =?UTF-8?q?disappear=20=F0=9F=96=8C=EF=B8=8F=20(#2527)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves #2521

## Description:

Small CSS fix so the new alliance icon does not stretch when there are
multiple icons.

## 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/PlayerIcons.ts      | 1 +
 src/client/graphics/layers/NameLayer.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/client/graphics/PlayerIcons.ts b/src/client/graphics/PlayerIcons.ts
index 928e54351..8c2510827 100644
--- a/src/client/graphics/PlayerIcons.ts
+++ b/src/client/graphics/PlayerIcons.ts
@@ -169,6 +169,7 @@ export function createAllianceProgressIcon(
   wrapper.style.width = `${size}px`;
   wrapper.style.height = `${size}px`;
   wrapper.style.display = "inline-block";
+  wrapper.style.flexShrink = "0";
 
   // Base faded icon (full)
   const base = document.createElement("img");
diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index f87ccd0a1..eb82e3a11 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -439,6 +439,7 @@ export class NameLayer implements Layer {
             // Update existing alliance icon
             allianceWrapper.style.width = `${iconSize}px`;
             allianceWrapper.style.height = `${iconSize}px`;
+            allianceWrapper.style.flexShrink = "0";
 
             const overlay = allianceWrapper.querySelector(
               ".alliance-progress-overlay",