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

@@ -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);
   }

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 {