[Fix] Fix input field overlaps

src/ui/form-modal-ui-handler.ts

@@ -71,6 +71,10 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
       (hasTitle ? 31 : 5) + 20 * (config.length - 1) + 16 + this.getButtonTopMargin(),
       "",
       TextStyle.TOOLTIP_CONTENT,
+      {
+        fontSize: "42px",
+        wordWrap: { width: 850 },
+      },
     );
     this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK));
     this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true));
@@ -83,20 +87,29 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
     this.inputs = [];
     this.formLabels = [];
     fieldsConfig.forEach((config, f) => {
-      const label = addTextObject(10, (hasTitle ? 31 : 5) + 20 * f, config.label, TextStyle.TOOLTIP_CONTENT);
+      // The Pokédex Scan Window has a much bigger width, so there is currently no need to shorten the label
+      const label = addTextObject(
+        10,
+        (hasTitle ? 31 : 5) + 20 * f,
+        config.label.length > 25 && this.constructor.name !== "PokedexScanUiHandler"
+          ? config.label.slice(0, 20) + "..."
+          : config.label,
+        TextStyle.TOOLTIP_CONTENT,
+      );
       label.name = "formLabel" + f;
 
       this.formLabels.push(label);
       this.modalContainer.add(this.formLabels[this.formLabels.length - 1]);
 
-      const inputContainer = globalScene.add.container(70, (hasTitle ? 28 : 2) + 20 * f);
+      const inputWidth = label.width < 320 ? 80 : 80 - (label.width - 320) / 5.5;
+      const inputContainer = globalScene.add.container(70 + (80 - inputWidth), (hasTitle ? 28 : 2) + 20 * f);
       inputContainer.setVisible(false);
 
-      const inputBg = addWindow(0, 0, 80, 16, false, false, 0, 0, WindowVariant.XTHIN);
+      const inputBg = addWindow(0, 0, inputWidth, 16, false, false, 0, 0, WindowVariant.XTHIN);
 
       const isPassword = config?.isPassword;
       const isReadOnly = config?.isReadOnly;
-      const input = addTextInputObject(4, -2, 440, 116, TextStyle.TOOLTIP_CONTENT, {
+      const input = addTextInputObject(4, -2, inputWidth * 5.5, 116, TextStyle.TOOLTIP_CONTENT, {
         type: isPassword ? "password" : "text",
         maxLength: isPassword ? 64 : 20,
         readOnly: isReadOnly,

src/ui/pokedex-scan-ui-handler.ts

@@ -160,8 +160,11 @@ export default class PokedexScanUiHandler extends FormModalUiHandler {
 
     if (super.show(args)) {
       const config = args[0] as ModalConfig;
-      this.inputs[0].resize(1150, 116);
+      const label = this.formLabels[0];
-      this.inputContainers[0].list[0].width = 200;
+
+      const inputWidth = label.width < 420 ? 200 : 200 - (label.width - 420) / 5.75;
+      this.inputs[0].resize(inputWidth * 5.75, 116);
+      this.inputContainers[0].list[0].width = inputWidth;
       if (args[1] && typeof (args[1] as PlayerPokemon).getNameToRender === "function") {
         this.inputs[0].text = (args[1] as PlayerPokemon).getNameToRender();
       } else {

src/ui/registration-form-ui-handler.ts

@@ -7,19 +7,6 @@ import i18next from "i18next";
 import { pokerogueApi } from "#app/plugins/api/pokerogue-api";
 import { globalScene } from "#app/global-scene";
 
-interface LanguageSetting {
-  inputFieldFontSize?: string;
-  warningMessageFontSize?: string;
-  errorMessageFontSize?: string;
-}
-
-const languageSettings: { [key: string]: LanguageSetting } = {
-  "es-ES": {
-    inputFieldFontSize: "50px",
-    errorMessageFontSize: "40px",
-  },
-};
-
 export default class RegistrationFormUiHandler extends FormModalUiHandler {
   getModalTitle(_config?: ModalConfig): string {
     return i18next.t("menu:register");
@@ -34,7 +21,7 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
   }
 
   getButtonTopMargin(): number {
-    return 8;
+    return 12;
   }
 
   getButtonLabels(_config?: ModalConfig): string[] {
@@ -75,18 +62,9 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
   setup(): void {
     super.setup();
 
-    this.modalContainer.list.forEach((child: Phaser.GameObjects.GameObject) => {
-      if (child instanceof Phaser.GameObjects.Text && child !== this.titleText) {
-        const inputFieldFontSize = languageSettings[i18next.resolvedLanguage!]?.inputFieldFontSize;
-        if (inputFieldFontSize) {
-          child.setFontSize(inputFieldFontSize);
-        }
-      }
-    });
-
-    const warningMessageFontSize = languageSettings[i18next.resolvedLanguage!]?.warningMessageFontSize ?? "42px";
     const label = addTextObject(10, 87, i18next.t("menu:registrationAgeWarning"), TextStyle.TOOLTIP_CONTENT, {
-      fontSize: warningMessageFontSize,
+      fontSize: "42px",
+      wordWrap: { width: 850 },
     });
 
     this.modalContainer.add(label);
@@ -106,10 +84,6 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
           const onFail = error => {
             globalScene.ui.setMode(UiMode.REGISTRATION_FORM, Object.assign(config, { errorMessage: error?.trim() }));
             globalScene.ui.playError();
-            const errorMessageFontSize = languageSettings[i18next.resolvedLanguage!]?.errorMessageFontSize;
-            if (errorMessageFontSize) {
-              this.errorMessage.setFontSize(errorMessageFontSize);
-            }
           };
           if (!this.inputs[0].text) {
             return onFail(i18next.t("menu:emptyUsername"));