From a7fb4f7943ed972e3b1c55bd5d6a4bde10c5a6e6 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Mon, 13 Jul 2026 15:54:50 +0000
Subject: [PATCH] =?UTF-8?q?web-next:=20fix=20layout=20del=20formulario=20d?=
 =?UTF-8?q?e=20a=C3=B1adir=20cuenta=20(mensaje=20abajo)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El <form> dentro del <p> «Nombre de la cuenta» era HTML inválido y el mensaje
salía inline (en inglés «Wrong password» partía en «Add Wrong / Password»).
Se quita el form: input+botón (onClick, Enter) en un span-bloque .add-account-box
debajo del nombre, y el mensaje en .add-account-msg (display:block) en su propia
línea. Igual en ES y EN.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/globals.css                    | 10 ++++++++--
 web-next/components/GameAccountSwitcher.tsx | 13 +++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index 95aa9e7..85ccd3b 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -386,12 +386,18 @@ textarea:focus {
   background: hsla(0, 0%, 100%, 0.1);
   color: #fff;
 }
-.add-account-form {
-  display: inline;
+/* El formulario de añadir cuenta sale en bloque, debajo del nombre. */
+.add-account-box {
+  display: block;
+  margin-top: 6px;
 }
 .add-account-input {
   min-width: 150px;
 }
+.add-account-msg {
+  display: block;
+  margin-top: 4px;
+}
 
 /* Colores de clase de WoW (nombre de personaje) */
 .class-warrior { color: #c79c6e; }
diff --git a/web-next/components/GameAccountSwitcher.tsx b/web-next/components/GameAccountSwitcher.tsx
index 0a2a8c5..63a930d 100644
--- a/web-next/components/GameAccountSwitcher.tsx
+++ b/web-next/components/GameAccountSwitcher.tsx
@@ -43,8 +43,7 @@ export function GameAccountSwitcher({
     }
   }
 
-  async function addAccount(e: React.FormEvent) {
-    e.preventDefault()
+  async function addAccount() {
     if (busy || !password) return
     setBusy(true)
     setError(null)
@@ -97,20 +96,22 @@ export function GameAccountSwitcher({
         +
       </button>
       {adding && (
-        <form onSubmit={addAccount} className="add-account-form" autoComplete="off">
+        <span className="add-account-box">
           <input
             type="password"
             maxLength={16}
             placeholder={t('addAccountPassword')}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addAccount() } }}
             className="account-select add-account-input"
+            autoComplete="off"
           />
-          <button type="submit" className="add-account-btn" disabled={busy}>
+          <button type="button" className="add-account-btn" onClick={addAccount} disabled={busy}>
             {busy ? '…' : t('addAccountConfirm')}
           </button>
-          {error && <span className="red-form-response"> {error}</span>}
-        </form>
+          {error && <span className="add-account-msg red-form-response">{error}</span>}
+        </span>
       )}
     </span>
   )