diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 517e54c1..6063fc59 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -318,11 +318,14 @@ import { siteUrl } from '../lib/site-url';
       document.addEventListener('click', (e) => {
         const b = e.target.closest('[data-urdu-kb], [data-urdu-rom]'); if (!b) return;
         target = document.getElementById(b.dataset.urduKb ?? b.dataset.urduRom)?.querySelector('[contenteditable]') ?? document.getElementById(b.dataset.urduKb ?? b.dataset.urduRom);
-        // in an open dialog (the note box) the header can't be reached: the keyboard moves under the box, and back when it closes
-        const box = b.dataset.urduKb && target.closest('dialog');
-        if (box) { kb.classList.remove('kb-float'); target.closest('.in-box-field')?.after(kb); }
-        else if (b.dataset.urduKb && target.isContentEditable) { kb.classList.add('kb-float'); document.body.append(kb); } // the editor: floating
-        else if (b.dataset.urduKb) home();
+        // a field's own keyboard opens right under that field (in view while typing, also in a dialog), and goes back to
+        // the header when closed; open under another field, it moves here
+        if (b.dataset.urduKb && target.isContentEditable) { kb.classList.add('kb-float'); document.body.append(kb); } // the editor: floating
+        else if (b.dataset.urduKb) {
+          const at = target.closest('.in-box-field') ?? target;
+          if (!kb.hidden && kb.previousElementSibling !== at) closeKb();
+          kb.classList.remove('kb-float'); at.after(kb);
+        }
         (b.dataset.urduKb ? kbBtn : romBtn).click();
         b.setAttribute('aria-pressed', (b.dataset.urduKb ? kbBtn : romBtn).getAttribute('aria-pressed'));
       });
diff --git a/web/src/pages/account.astro b/web/src/pages/account.astro
index 3d045e92..2448fa91 100644
--- a/web/src/pages/account.astro
+++ b/web/src/pages/account.astro
@@ -48,8 +48,8 @@ import Icon from '../components/Icon.astro';
   <form method="post" class="account-form">
     <h2>پروفائل</h2>
     <input type="hidden" name="act" value="profile" />
-    <label>پورا نام<input name="full_name" value={user.full_name} maxlength="100" dir="auto" autocomplete="name" /></label>
-    <label>تعارف<textarea name="bio" maxlength="1000" rows="4" dir="auto">{user.bio}</textarea></label>
+    <label>پورا نام<span class="in-box-field"><input id="p-name" name="full_name" value={user.full_name} maxlength="100" dir="auto" autocomplete="name" data-urdu /><button type="button" class="in-box rom" data-urdu-rom="p-name" aria-pressed="false" aria-label="رومن حروف سے اردو" title="رومن حروف سے اردو ٹائپنگ">اب</button><button type="button" class="in-box" data-urdu-kb="p-name" aria-pressed="false" aria-label="اردو کی بورڈ" title="اردو کی بورڈ"><Icon name="keyboard" size={18} /></button></span></label>
+    <label>تعارف<span class="in-box-field note-field"><textarea id="p-bio" name="bio" maxlength="1000" rows="4" dir="auto" data-urdu>{user.bio}</textarea><button type="button" class="in-box rom" data-urdu-rom="p-bio" aria-pressed="false" aria-label="رومن حروف سے اردو" title="رومن حروف سے اردو ٹائپنگ">اب</button><button type="button" class="in-box" data-urdu-kb="p-bio" aria-pressed="false" aria-label="اردو کی بورڈ" title="اردو کی بورڈ"><Icon name="keyboard" size={18} /></button></span></label>
     <button type="submit" class="btn primary"><Icon name="save" size={18} /> محفوظ کریں</button>
   </form>
 
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index d7922139..04636184 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -293,7 +293,7 @@ h1 + .muted { text-align: center; margin-top: 0; }
 .account-form > button { font-size: inherit; padding: 4px 14px; }
 /* boxes with the keyboard buttons inside them: full width, and the small in-box buttons keep their own look */
 .account-form .in-box-field { display: block; position: relative; }
-.account-form .in-box-field input { width: 100%; box-sizing: border-box; }
+.account-form .in-box-field :is(input, textarea) { width: 100%; box-sizing: border-box; }
 .account-form .in-box { padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); }
 .account-form.danger button { border-color: var(--danger); color: var(--danger); }
 .form-error { color: var(--danger); text-align: center; }