diff --git a/html/auth-guard.js b/html/auth-guard.js
index 20663b8..a6fb029 100644
--- a/html/auth-guard.js
+++ b/html/auth-guard.js
@@ -179,13 +179,20 @@
     var wrap = document.createElement('div');
     wrap.id = 'wp-usermenu';
     var linkColor = dark ? '#ffffff' : '#0f62fe';
-    wrap.style.cssText = 'display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:14px;white-space:nowrap;' +
+    // The menu wraps; each link inside does not. It used to be nowrap as a whole,
+    // which made it one unbreakable 412px run — at 390px that put "Sign out" at
+    // x382-432, half of it past the edge and untappable (F2). Wrapping the container
+    // costs nothing above 720px, where it has never needed to wrap. Interim: T2.2
+    // replaces this markup with the drawer.
+    wrap.style.cssText = 'display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:14px;' +
+      'flex-wrap:wrap;min-width:0;' +
       'font:400 13px/1.2 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
       'color:' + (dark ? '#c6c6c6' : '#525252') + ';';
     function sep() { var s = document.createElement('span'); s.textContent = '·'; s.style.color = dark ? '#6f6f6f' : '#a8a8a8'; return s; }
     function link(text, onClick, href) {
       var a = document.createElement('a'); a.textContent = text; a.href = href || '#';
-      a.style.cssText = 'color:' + linkColor + ';text-decoration:none;font-weight:600;';
+      // nowrap per link, so "Language & time" wraps as a unit rather than mid-phrase.
+      a.style.cssText = 'color:' + linkColor + ';text-decoration:none;font-weight:600;white-space:nowrap;';
       if (onClick) a.addEventListener('click', function (e) { e.preventDefault(); onClick(); });
       return a;
     }
diff --git a/html/wp-chrome.js b/html/wp-chrome.js
index 9783485..027de73 100644
--- a/html/wp-chrome.js
+++ b/html/wp-chrome.js
@@ -255,6 +255,20 @@
     var clear = box.querySelector('.wpc-clear');
     var timer = null, seq = 0, items = [], activeIx = -1;
 
+    // Below 620px the box is roughly 200px and the full placeholder ellipsises to
+    // "Search work packages, proj" — the truncation half of F2. The control is
+    // usable either way; this stops it reading as broken. 620px is the breakpoint
+    // wp-chrome.css already uses for this element, not a new one. Interim: T2.2.
+    try {
+      var narrow = window.matchMedia('(max-width: 620px)');
+      var setPlaceholder = function (m) {
+        input.placeholder = m.matches ? 'Search…' : 'Search work packages, projects, SOPs…';
+      };
+      setPlaceholder(narrow);
+      if (narrow.addEventListener) narrow.addEventListener('change', setPlaceholder);
+      else if (narrow.addListener) narrow.addListener(setPlaceholder);
+    } catch (e) {}
+
     function close() { pop.hidden = true; activeIx = -1; }
 
     function highlight() {