From 037796971a57ff2b26e7199acb6b2e4eb4af92aa Mon Sep 17 00:00:00 2001
From: Erwan Huon <67637529+ERHash@users.noreply.github.com>
Date: Mon, 2 Jun 2025 19:43:57 +0200
Subject: [PATCH] Fix text overflow in instructions for longer translations
 (#971)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

This pull request addresses a layout issue where text in instructions
(player icon) would overflow or be cut off, especially when translated
into languages with longer word structures (e.g., Dutch, German, French,
...)


![image](https://github.com/user-attachments/assets/8fe77f1c-91e1-44ad-91b4-2dbec720fee3)
_Before_ (web app view)



![image](https://github.com/user-attachments/assets/5c867453-4b3c-49e2-b45d-a3ec5af8c2ab)
_After_ (mobile layout)

### 🔧 Changes made:
Removed fixed height classes h-8 and md:h-10 from description
containers.

Allowed natural text wrapping and height growth by relying on min-h only
where needed.

Added text-center for better alignment and break-words to handle long
words gracefully.

### 🧪 Tested in:

Dutch

German

French

English

Responsive layouts (mobile and desktop)

## 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 -> UI only
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

RTHOne
---
 src/client/HelpModal.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index 6209d50ea..bd1807f59 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -473,7 +473,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_crown")}
               </div>
@@ -489,7 +489,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_traitor")}
               </div>
@@ -505,7 +505,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_ally")}
               </div>
@@ -523,7 +523,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_embargo")}
               </div>
@@ -539,7 +539,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 h-8 md:h-10 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_request")}
               </div>