From f1fc5434be2fafeec0980d1ae99313b7ca84cab1 Mon Sep 17 00:00:00 2001
From: JB940 <Jordybr94@gmail.com>
Date: Fri, 10 Jul 2026 21:38:12 +0200
Subject: [PATCH] fix classes for controlpanel unit display and control
 panel/playerinfo gold display (#4562)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> **Before opening a PR:** discuss new features on
[Discord](https://discord.gg/K9zernJB5z) first, and file bugs or small
improvements as
[issues](https://github.com/openfrontio/OpenFrontIO/issues/new/choose).
You must be assigned to an `approved` issue — unsolicited PRs will be
auto-closed.

**Add approved & assigned issue number here:**

Resolves #4411

## Description:

This PR removes three extra classes in the UI causing issues but no
additional functionality. Gold UI elements were artificially not scaled.
I have confirmed on mobile devices and different layouts, the containers
behave exactly the same way, unless people have an accessibility feature
like scaled text size OR the text grows too large, in which case they
now properly fit into the container as the fix suggests.
Before:
<img width="653" height="116" alt="image"
src="https://github.com/user-attachments/assets/70c81cdd-8bdc-40cc-977e-b045078eafc0"
/>
After:
<img width="636" height="119" alt="image"
src="https://github.com/user-attachments/assets/926fcb94-7944-46f9-a58a-adc7984278b1"
/>

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

## Please put your Discord username so you can be contacted if a bug or
regression is found:

JB940
---
 src/client/hud/layers/ControlPanel.ts      | 2 +-
 src/client/hud/layers/PlayerInfoOverlay.ts | 2 +-
 src/client/hud/layers/UnitDisplay.ts       | 4 +---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/client/hud/layers/ControlPanel.ts b/src/client/hud/layers/ControlPanel.ts
index 303aae100..3ba34b2af 100644
--- a/src/client/hud/layers/ControlPanel.ts
+++ b/src/client/hud/layers/ControlPanel.ts
@@ -494,7 +494,7 @@ export class ControlPanel extends LitElement implements Controller {
         <div class="flex-1">${this.renderDesktopTroopBar()}</div>
         <!-- Gold -->
         <div
-          class="flex items-center gap-1 shrink-0 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm py-0.5 px-1 w-[4.5rem] relative"
+          class="flex items-center gap-1 shrink-0 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm py-0.5 px-1 min-w-[4.5rem] relative"
           translate="no"
         >
           ${this._goldGain !== null
diff --git a/src/client/hud/layers/PlayerInfoOverlay.ts b/src/client/hud/layers/PlayerInfoOverlay.ts
index b0b6773a2..33659861d 100644
--- a/src/client/hud/layers/PlayerInfoOverlay.ts
+++ b/src/client/hud/layers/PlayerInfoOverlay.ts
@@ -307,7 +307,7 @@ export class PlayerInfoOverlay extends LitElement implements Controller {
         <div class="flex flex-col gap-1 shrink-0 w-28 md:w-36">
           <div class="flex items-center gap-1">
             <div
-              class="flex flex-1 items-center justify-center px-1 py-0.5 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm lg:gap-1"
+              class="flex items-center justify-center px-1 py-0.5 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm lg:gap-1"
               translate="no"
             >
               <img src=${goldCoinIcon} width="13" height="13" />
diff --git a/src/client/hud/layers/UnitDisplay.ts b/src/client/hud/layers/UnitDisplay.ts
index e3e9f1334..12b5eb811 100644
--- a/src/client/hud/layers/UnitDisplay.ts
+++ b/src/client/hud/layers/UnitDisplay.ts
@@ -120,9 +120,7 @@ export class UnitDisplay extends LitElement implements Controller {
 
     return html`
       <div class="border-t border-white/10 p-0.5 w-full">
-        <div
-          class="grid grid-rows-1 auto-cols-max grid-flow-col gap-0.5 w-fit mx-auto"
-        >
+        <div class="grid grid-rows-1 grid-flow-col gap-0.5 w-fit mx-auto">
           ${this.renderUnitItem(
             cityIcon,
             this._cities,