v0.10.8 mobile bug fixes

frontend/src/pages/UserManagerPage.jsx

@@ -4,6 +4,8 @@ import { api } from '../utils/api.js';
 import Avatar from '../components/Avatar.jsx';
 import UserFooter from '../components/UserFooter.jsx';
 
+const SIDEBAR_W = 260;
+
 function isValidEmail(e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); }
 
 function parseCSV(text) {
@@ -118,7 +120,6 @@ function UserRow({ u, onUpdated }) {
               Edit Name
             </button>
           )}
-
           <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:4 }}>
             <select value={roleWarning ? '' : u.role} onChange={e => handleRole(e.target.value)}
               className="input" style={{ width:140, padding:'5px 8px', fontSize:13, borderColor:roleWarning?'#e53935':undefined }}>
@@ -128,7 +129,6 @@ function UserRow({ u, onUpdated }) {
             </select>
             {roleWarning && <span style={{ fontSize:12, color:'#e53935' }}>Role Required</span>}
           </div>
-
           {showReset ? (
             <div style={{ display:'flex', gap:6, alignItems:'center' }}>
               <input className="input" style={{ flex:1, fontSize:13, padding:'5px 8px' }}
@@ -146,7 +146,6 @@ function UserRow({ u, onUpdated }) {
               Reset Password
             </button>
           )}
-
           <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
             {u.status==='active' ? (
               <button className="btn btn-secondary btn-sm" onClick={handleSuspend}>Suspend</button>
@@ -162,7 +161,7 @@ function UserRow({ u, onUpdated }) {
 }
 
 // ── Create user form ──────────────────────────────────────────────────────────
-function CreateUserForm({ userPass, onCreated, isMobile = false }) {
+function CreateUserForm({ userPass, onCreated, isMobile }) {
   const toast = useToast();
   const [form, setForm] = useState({ name:'', email:'', password:'', role:'member' });
   const [saving, setSaving] = useState(false);
@@ -183,7 +182,7 @@ function CreateUserForm({ userPass, onCreated, isMobile = false }) {
   };
 
   return (
-    <div style={{ maxWidth: isMobile ? '100%' : 560 }}>
+    <div style={{ maxWidth:560 }}>
       <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:12, marginBottom:12 }}>
         <div className="flex-col gap-1">
           <label className="text-sm font-medium" style={{ color:'var(--text-secondary)' }}>Full Name <span style={{ fontWeight:400, color:'var(--text-tertiary)' }}>(First Last)</span></label>
@@ -256,11 +255,7 @@ function BulkImportForm({ userPass, onCreated }) {
           <input ref={fileRef} type="file" accept=".csv,.txt" style={{ display:'none' }} onChange={handleFile} />
         </label>
         {csvFile && <span className="text-sm" style={{ color:'var(--text-secondary)' }}>{csvFile.name}{csvRows.length > 0 && <span style={{ color:'var(--text-tertiary)', marginLeft:6 }}>({csvRows.length} valid)</span>}</span>}
-        {csvRows.length > 0 && (
-          <button className="btn btn-primary" onClick={handleImport} disabled={loading}>
-            {loading ? 'Creating…' : `Create ${csvRows.length} User${csvRows.length!==1?'s':''}`}
-          </button>
-        )}
+        {csvRows.length > 0 && <button className="btn btn-primary" onClick={handleImport} disabled={loading}>{loading ? 'Creating…' : `Create ${csvRows.length} User${csvRows.length!==1?'s':''}`}</button>}
       </div>
       {csvInvalid.length > 0 && (
         <div style={{ background:'rgba(229,57,53,0.07)', border:'1px solid #e53935', borderRadius:'var(--radius)', padding:10 }}>
@@ -300,6 +295,7 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
   const [search, setSearch] = useState('');
   const [tab, setTab] = useState('users');
   const [userPass, setUserPass] = useState('user@1234');
+  const [inputFocused, setInputFocused] = useState(false);
 
   const load = async () => {
     setLoadError(''); setLoading(true);
@@ -321,57 +317,72 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
     u.email?.toLowerCase().includes(search.toLowerCase())
   );
 
-  const pad = isMobile ? 16 : 24;
   return (
-    <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:'var(--background)' }}>
-      {/* Page header */}
-      <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:`0 ${pad}px`, flexShrink:0 }}>
-        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52, gap:8 }}>
-          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-            <span style={{ fontWeight:700, fontSize:15 }}>User Manager</span>
-            {!loading && <span style={{ fontSize:12, color:'var(--text-tertiary)', flexShrink:0 }}>{users.length} user{users.length!==1?'s':''}</span>}
-          </div>
-          <div style={{ display:'flex', gap:8 }}>
-            <button className={`btn btn-sm ${tab==='users'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('users')}>Users</button>
-            <button className={`btn btn-sm ${tab==='create'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('create')}>+ Create</button>
-            {!isMobile && <button className={`btn btn-sm ${tab==='bulk'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('bulk')}>Bulk</button>}
+    <div style={{ display:'flex', flex:1, overflow:'hidden', minHeight:0 }}>
+
+      {/* ── Left panel (desktop only) — blank, reserved for future use ── */}
+      {!isMobile && (
+        <div style={{ width:SIDEBAR_W, flexShrink:0, borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', background:'var(--surface)', overflow:'hidden' }}>
+          <div style={{ flex:1 }} />
+          <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
+        </div>
+      )}
+
+      {/* ── Right panel ── */}
+      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minWidth:0, background:'var(--background)' }}>
+
+        {/* Header */}
+        <div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 16px', flexShrink:0 }}>
+          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52, gap:8 }}>
+            <div style={{ display:'flex', alignItems:'center', gap:8, minWidth:0 }}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+              <span style={{ fontWeight:700, fontSize:15 }}>User Manager</span>
+              {!loading && <span style={{ fontSize:12, color:'var(--text-tertiary)', flexShrink:0 }}>{users.length} user{users.length!==1?'s':''}</span>}
+            </div>
+            <div style={{ display:'flex', gap:6, flexShrink:0 }}>
+              <button className={`btn btn-sm ${tab==='users'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('users')}>Users</button>
+              <button className={`btn btn-sm ${tab==='create'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('create')}>+ Create</button>
+              {!isMobile && <button className={`btn btn-sm ${tab==='bulk'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('bulk')}>Bulk</button>}
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Content */}
-      <div style={{ flex:1, overflowY:'auto', padding:pad }}>
-        {tab === 'users' && (
-          <>
-            <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
-              autoComplete="new-password" autoCorrect="off" spellCheck={false}
-              style={{ marginBottom:16, width:'100%', maxWidth: isMobile ? '100%' : 400 }} />
-            <div style={{ background:'var(--surface)', borderRadius:'var(--radius)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
-              {loading ? (
-                <div style={{ padding:48, textAlign:'center' }}><div className="spinner" /></div>
-              ) : loadError ? (
-                <div style={{ padding:32, textAlign:'center', color:'var(--error)' }}>
-                  <div style={{ marginBottom:12 }}>⚠ {loadError}</div>
-                  <button className="btn btn-secondary btn-sm" onClick={load}>Retry</button>
-                </div>
-              ) : filtered.length === 0 ? (
-                <div style={{ padding:32, textAlign:'center', color:'var(--text-tertiary)', fontSize:14 }}>
-                  {search ? 'No users match your search.' : 'No users yet.'}
-                </div>
-              ) : (
-                filtered.map(u => <UserRow key={u.id} u={u} onUpdated={load} />)
-              )}
-            </div>
-          </>
+        {/* Content */}
+        <div style={{ flex:1, overflowY:'auto', padding:16, paddingBottom: isMobile ? 86 : 16 }}>
+          {tab === 'users' && (
+            <>
+              <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
+                onFocus={() => setInputFocused(true)} onBlur={() => setInputFocused(false)}
+                autoComplete="new-password" autoCorrect="off" spellCheck={false}
+                style={{ marginBottom:16, width:'100%', maxWidth: isMobile ? '100%' : 400 }} />
+              <div style={{ background:'var(--surface)', borderRadius:'var(--radius)', boxShadow:'var(--shadow-sm)', overflow:'hidden' }}>
+                {loading ? (
+                  <div style={{ padding:48, textAlign:'center' }}><div className="spinner" /></div>
+                ) : loadError ? (
+                  <div style={{ padding:32, textAlign:'center', color:'var(--error)' }}>
+                    <div style={{ marginBottom:12 }}>⚠ {loadError}</div>
+                    <button className="btn btn-secondary btn-sm" onClick={load}>Retry</button>
+                  </div>
+                ) : filtered.length === 0 ? (
+                  <div style={{ padding:32, textAlign:'center', color:'var(--text-tertiary)', fontSize:14 }}>
+                    {search ? 'No users match your search.' : 'No users yet.'}
+                  </div>
+                ) : (
+                  filtered.map(u => <UserRow key={u.id} u={u} onUpdated={load} />)
+                )}
+              </div>
+            </>
+          )}
+          {tab === 'create' && <CreateUserForm userPass={userPass} onCreated={() => { load(); setTab('users'); }} isMobile={isMobile} />}
+          {tab === 'bulk'   && <BulkImportForm userPass={userPass} onCreated={load} />}
+        </div>
+
+        {/* Mobile footer — fixed at bottom, hidden when keyboard open */}
+        {isMobile && !inputFocused && (
+          <div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:20, background:'var(--surface)', borderTop:'1px solid var(--border)' }}>
+            <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
+          </div>
         )}
-        {tab === 'create' && <CreateUserForm userPass={userPass} onCreated={() => { load(); setTab('users'); }} isMobile={isMobile} />}
-        {tab === 'bulk'   && <BulkImportForm userPass={userPass} onCreated={load} />}
-      </div>
-
-      {/* User footer */}
-      <div className="sidebar-footer">
-        <UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
       </div>
     </div>
   );