From 1d5d721c5064a05317935b8875faaba2ba88ec07 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Thu, 17 Jul 2025 14:57:38 -0700
Subject: [PATCH] fix control panel & events display scaling on mobile  (#1471)

## Description:

The Control panel & events display were not scaling properly on mobile,
now when screen is small enough they take the entire width, this keeps
the behavior in line with v23.

## 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
- [x] I have read and accepted the CLA aggreement (only required once).

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

evan
---
 src/client/graphics/layers/ControlPanel.ts  | 8 ++++----
 src/client/graphics/layers/EventsDisplay.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index a9d83dc1e..0f2f8f629 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -212,11 +212,11 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-[320px] text-sm lg:text-m bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
+          ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >
-        <div class="hidden lg:block bg-black/30 text-white mb-4 p-2 rounded">
+        <div class="hidden sm:block bg-black/30 text-white mb-4 p-2 rounded">
           <div class="flex justify-between mb-1">
             <span class="font-bold"
               >${translateText("control_panel.pop")}:</span
@@ -244,7 +244,7 @@ export class ControlPanel extends LitElement implements Layer {
           </div>
         </div>
 
-        <div class="relative mb-4 lg:mb-4">
+        <div class="relative mb-4 sm:mb-4">
           <label class="block text-white mb-1" translate="no"
             >${translateText("control_panel.troops")}:
             <span translate="no">${renderTroops(this._troops)}</span> |
@@ -277,7 +277,7 @@ export class ControlPanel extends LitElement implements Layer {
           </div>
         </div>
 
-        <div class="relative mb-0 lg:mb-4">
+        <div class="relative mb-0 sm:mb-4">
           <label class="block text-white mb-1" translate="no"
             >${translateText("control_panel.attack_ratio")}:
             ${(this.attackRatio * 100).toFixed(0)}%
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 015e03b5a..98b806fdf 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -900,7 +900,7 @@ export class EventsDisplay extends LitElement implements Layer {
         : html`
             <!-- Main Events Display -->
             <div
-              class="relative w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:w-96 backdrop-blur"
+              class="relative w-full sm:bottom-2.5 sm:right-2.5 z-50 sm:w-96 backdrop-blur"
             >
               <!-- Button Bar -->
               <div