From fe89713f46433f82546d6d78f1fde3f222f3afab Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Sat, 7 Mar 2026 22:01:18 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20UI=20(again)=20=F0=9F=96=8C=EF=B8=8F=20(#?=
 =?UTF-8?q?3379)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

 **Fix UI spacing and border radius across multiple screen sizes**

- Fix events panel missing right margin on wide screens
- Fix incorrect border radius on events panel and control panel at
various breakpoints
- Remove border radius from attack/boat elements on small screens
- Show running attacks above the events panel on mobile
- Add left/right margin to the homepage on tablet-sized screens
- Adjust lobby card spacing on mobile

Previous

<img width="410" height="124" alt="Screenshot 2026-03-07 203244"
src="https://github.com/user-attachments/assets/d3feb9fe-97a3-44d0-9aba-db04062f9911"
/>


After

<img width="417" height="117" alt="Screenshot 2026-03-07 203255"
src="https://github.com/user-attachments/assets/31b88145-8e92-40db-b9cc-f2a00754f900"
/>


Previous

<img width="828" height="123" alt="Screenshot 2026-03-07 203320"
src="https://github.com/user-attachments/assets/4e162cf5-7d82-4e87-9dd9-9ab1d3782f23"
/>


After

<img width="820" height="126" alt="Screenshot 2026-03-07 203337"
src="https://github.com/user-attachments/assets/a25121aa-603c-41c7-b335-406a38a62cf9"
/>


Previous

<img width="961" height="102" alt="Screenshot 2026-03-07 203353"
src="https://github.com/user-attachments/assets/22ba9770-88a3-4f49-aeb6-6d875006946b"
/>


After

<img width="954" height="78" alt="Screenshot 2026-03-07 203403"
src="https://github.com/user-attachments/assets/0d4e3b19-de1c-4211-b1e3-bd935025de33"
/>


Previous

<img width="557" height="154" alt="Screenshot 2026-03-07 203450"
src="https://github.com/user-attachments/assets/2cc8a747-3e68-4449-9746-62fcbca76510"
/>


After

<img width="602" height="146" alt="Screenshot 2026-03-07 203421"
src="https://github.com/user-attachments/assets/bae399a3-8969-4b7a-a77c-c73c4f775ca0"
/>


Previous

<img width="727" height="889" alt="Screenshot 2026-03-07 204707"
src="https://github.com/user-attachments/assets/bc53febf-9beb-4195-a994-858333f30f24"
/>


After

<img width="725" height="799" alt="Screenshot 2026-03-07 204714"
src="https://github.com/user-attachments/assets/9d600212-73ae-4566-b1c5-df83e8edb8e9"
/>


Previous

<img width="658" height="890" alt="Screenshot 2026-03-07 204633"
src="https://github.com/user-attachments/assets/6c935fcc-3e46-4706-8c9a-9840cc469b60"
/>


After

<img width="656" height="798" alt="Screenshot 2026-03-07 204639"
src="https://github.com/user-attachments/assets/8e490f29-cf50-4c1f-a97e-f550fd4f9a13"
/>

## 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
---
 index.html                                   | 14 ++++++++------
 src/client/GameModeSelector.ts               |  2 +-
 src/client/components/MainLayout.ts          |  2 +-
 src/client/components/PlayPage.ts            |  2 +-
 src/client/graphics/layers/AttacksDisplay.ts | 12 ++++++------
 src/client/graphics/layers/EventsDisplay.ts  |  6 ++++--
 6 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index c5d47ffa5..7c587b0f2 100644
--- a/index.html
+++ b/index.html
@@ -273,22 +273,24 @@
         padding-right: env(safe-area-inset-right);
       "
     >
-      <!-- HUD: <sm full-width, sm..lg left side 460px, lg+ col-2 -->
+      <!-- HUD: <sm contents (children join outer flex), sm+ flex-col 460px, lg+ col-2 -->
       <div
-        class="flex flex-col pointer-events-none w-full sm:w-[460px] lg:col-start-2 z-10"
+        class="contents sm:flex sm:flex-col sm:pointer-events-none w-full sm:w-[460px] lg:col-start-2 sm:z-10"
       >
-        <attacks-display class="w-full pointer-events-auto"></attacks-display>
+        <attacks-display
+          class="w-full pointer-events-auto order-1 sm:order-none"
+        ></attacks-display>
         <div
-          class="pointer-events-auto bg-gray-800/70 backdrop-blur-xs rounded-lg shadow-lg"
+          class="pointer-events-auto bg-gray-800/70 backdrop-blur-xs sm:rounded-tr-lg lg:rounded-t-lg min-[1200px]:rounded-lg shadow-lg order-3 sm:order-none"
         >
           <control-panel class="w-full"></control-panel>
           <unit-display class="hidden lg:block w-full"></unit-display>
         </div>
       </div>
 
-      <!-- events+chat: <sm above HUD (order-first), sm..lg right side, lg+ col-3 -->
+      <!-- events+chat: <sm between attacks and control (order-2), sm+ right side, lg+ col-3 -->
       <div
-        class="flex flex-col pointer-events-none items-end order-first sm:order-none sm:flex-1 lg:col-start-3 lg:self-end lg:justify-end"
+        class="flex flex-col pointer-events-none items-end order-2 sm:order-none sm:flex-1 lg:col-start-3 lg:self-end lg:justify-end min-[1200px]:mr-4"
       >
         <chat-display
           class="w-full sm:w-auto pointer-events-auto"
diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 8aeaff5de..d4f3c08a2 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -119,7 +119,7 @@ export class GameModeSelector extends LitElement {
     const special = this.lobbies?.games?.["special"]?.[0];
 
     return html`
-      <div class="flex flex-col gap-4 w-[84%] sm:w-full mx-auto pb-4 sm:pb-0">
+      <div class="flex flex-col gap-4 w-full px-4 sm:px-0 mx-auto pb-4 sm:pb-0">
         <!-- Solo: mobile only, top -->
         <div class="sm:hidden h-14">
           ${this.renderSmallActionCard(
diff --git a/src/client/components/MainLayout.ts b/src/client/components/MainLayout.ts
index 1c32e6dcf..ccb3fc25b 100644
--- a/src/client/components/MainLayout.ts
+++ b/src/client/components/MainLayout.ts
@@ -22,7 +22,7 @@ export class MainLayout extends LitElement {
         class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.75rem,1.5vw,1.5rem)]"
       >
         <div
-          class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden"
+          class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden sm:px-4 lg:px-0"
         >
           ${this._initialChildren}
         </div>
diff --git a/src/client/components/PlayPage.ts b/src/client/components/PlayPage.ts
index 09d1d2cba..02c77e93d 100644
--- a/src/client/components/PlayPage.ts
+++ b/src/client/components/PlayPage.ts
@@ -100,7 +100,7 @@ export class PlayPage extends LitElement {
         </div>
 
         <div
-          class="w-full pb-4 lg:pb-0 flex flex-col gap-4 lg:grid lg:grid-cols-[2fr_1fr] lg:gap-4"
+          class="w-full pb-4 lg:pb-0 flex flex-col gap-4 sm:-mx-4 sm:w-[calc(100%+2rem)] lg:mx-0 lg:w-full lg:grid lg:grid-cols-[2fr_1fr] lg:gap-4"
         >
           <!-- Mobile: spacer for fixed top bar -->
           <div
diff --git a/src/client/graphics/layers/AttacksDisplay.ts b/src/client/graphics/layers/AttacksDisplay.ts
index 88e0f4c15..5aebdec98 100644
--- a/src/client/graphics/layers/AttacksDisplay.ts
+++ b/src/client/graphics/layers/AttacksDisplay.ts
@@ -221,7 +221,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.incomingAttacks.map(
       (attack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -254,7 +254,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 />`,
                 onClick: () => this.handleRetaliate(attack),
                 className:
-                  "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded-lg px-1.5 py-1 border border-red-700/50",
+                  "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 sm:rounded-lg px-1.5 py-1 border border-red-700/50",
                 translate: false,
               })
             : ""}
@@ -269,7 +269,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingAttacks.map(
       (attack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -311,7 +311,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingLandAttacks.map(
       (landAttack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -367,7 +367,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingBoats.map(
       (boat) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`${this.renderBoatIcon(boat)}
@@ -403,7 +403,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.incomingBoats.map(
       (boat) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded-lg px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs sm:rounded-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`${this.renderBoatIcon(boat)}
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 4c3873edd..f8b2f1cae 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -809,7 +809,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 `,
                 onClick: this.toggleHidden,
                 className:
-                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg max-sm:rounded-tr-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
+                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 min-[1200px]:rounded-lg sm:rounded-tl-lg bg-gray-800/70 backdrop-blur-xs",
               })}
             </div>
           `
@@ -819,7 +819,9 @@ export class EventsDisplay extends LitElement implements Layer {
               class="relative w-full z-50 min-[1200px]:w-96 backdrop-blur-sm"
             >
               <!-- Button Bar -->
-              <div class="w-full p-2 lg:p-3 bg-gray-800/70 rounded-t-lg">
+              <div
+                class="w-full p-2 lg:p-3 bg-gray-800/70 sm:rounded-tl-lg min-[1200px]:rounded-t-lg"
+              >
                 <div class="flex justify-between items-center gap-3">
                   <div class="flex gap-4">
                     ${this.renderToggleButton(