From 8950816b3eea07be2169eead3a4829bc5f44a11b Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Sat, 24 May 2025 23:04:12 +0200
Subject: [PATCH] Error modal can't be closed on some screens: scale it better
 (#861)

## Description:

ShowErrorModal doesn't scale on smaller screens. Resulting in the text,
and copy and close buttons being partly or fully out of view. Users
can't read the instructions nor error message, and not even close the
modal so they need to close off their game. This PR brings better
scaling for the modal and text-wrapping to fix this.

Examples with the desync error below.

BEFORE on 1920x1200:


![before](https://github.com/user-attachments/assets/e6a62370-f634-4b90-a561-22d549636284)


AFTER on 1920x1200:

![AFTER on 1920x1200 16 inch
laptop](https://github.com/user-attachments/assets/f62b6c1a-e597-40de-ba0d-a02c9421f8f5)

on mobile:

![AFTER on
mobile](https://github.com/user-attachments/assets/7ef0013d-aef9-4bf3-b4e8-68743c7d5555)

on big tablet:

![AFTER on
tablet](https://github.com/user-attachments/assets/5e061738-55fd-46f3-bec5-91c933920c87)

on mini tablet:

![AFTER on tablet
mini](https://github.com/user-attachments/assets/f15eba6a-fe1f-490b-bc04-63d404950e15)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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:

tryout33

---------

Co-authored-by: tnhnblgl <51187395+tnhnblgl@users.noreply.github.com>
---
 src/client/ClientGameRunner.ts | 11 +++-----
 src/client/styles.css          | 50 ++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index 0cd0db4fb..cc97289d2 100644
--- a/src/client/ClientGameRunner.ts
+++ b/src/client/ClientGameRunner.ts
@@ -506,6 +506,8 @@ function showErrorModal(
   }
 
   const modal = document.createElement("div");
+  modal.id = "error-modal";
+
   const content = `${heading}\n game id: ${gameID}, client id: ${clientID}\nPlease paste the following in your bug report in Discord:\n${errorText}`;
 
   // Create elements
@@ -514,8 +516,7 @@ function showErrorModal(
 
   const button = document.createElement("button");
   button.textContent = "Copy to clipboard";
-  button.style.cssText =
-    "padding: 8px 16px; margin-top: 10px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;";
+  button.className = "copy-btn";
   button.addEventListener("click", () => {
     navigator.clipboard
       .writeText(content)
@@ -525,18 +526,14 @@ function showErrorModal(
 
   const closeButton = document.createElement("button");
   closeButton.textContent = "X";
-  closeButton.style.cssText =
-    "color: white;top: 0px;right: 0px;cursor: pointer;background: red;margin-right: 0px;position: fixed;width: 40px;";
+  closeButton.className = "close-btn";
   closeButton.addEventListener("click", () => {
     modal.style.display = "none";
   });
 
   // Add to modal
-  modal.style.cssText =
-    "position:fixed; padding:20px; background:white; border:1px solid black; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;";
   modal.appendChild(pre);
   modal.appendChild(button);
-  modal.id = "error-modal";
   if (closable) {
     modal.appendChild(closeButton);
   }
diff --git a/src/client/styles.css b/src/client/styles.css
index 32da93e41..c90750863 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -453,6 +453,56 @@ label.option-card:hover {
     max-width: 100vw;
     width: 100%;
   }
+  #error-modal {
+    max-width: 575px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #error-modal {
+    max-width: 350px;
+  }
+}
+
+#error-modal {
+  position: fixed;
+  padding: 20px;
+  background: white;
+  border: 1px solid black;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  width: 87%;
+  box-sizing: border-box;
+}
+
+#error-modal pre {
+  overflow-x: auto;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+#error-modal button.copy-btn {
+  padding: 8px 16px;
+  margin-top: 10px;
+  background: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#error-modal button.close-btn {
+  color: white;
+  top: 0px;
+  right: 0px;
+  cursor: pointer;
+  background: red;
+  margin-right: 0px;
+  position: fixed;
+  width: 40px;
 }
 
 .start-game-button-container {