Merge pull request 'Mobile responsiveness across the portal + viewport regression test' (#46) from Talha into main

frontend/mobile.test.mjs

@@ -0,0 +1,108 @@
+/* ============================================================
+   mobile.test.mjs — mobile-viewport regression test.
+
+   Opens every app route at phone/tablet widths against the running dev
+   server, logs in as the local seeded tester, and fails if any route lets
+   the main pane scroll sideways (the classic clipped-card / blown-out-grid
+   symptom) or throws a runtime error. Intended horizontal scrollers
+   (.table-wrap, .kanban, .tabs, .stepper) are exempt by design: they scroll
+   inside themselves, never the pane.
+
+   Requirements (not part of the default `npm run verify` chain):
+     - dev server running (npm run dev) and the backend reachable
+     - Chrome installed (CHROME_PATH overrides the default location)
+     - puppeteer-core available:  npm i -D puppeteer-core   (no download;
+       it drives the installed Chrome)
+
+   Run:  node mobile.test.mjs
+   Env:  ATS_BASE_URL, CHROME_PATH, ATS_TEST_EMAIL, ATS_TEST_PASSWORD
+   ============================================================ */
+
+let puppeteer
+try {
+  puppeteer = (await import('puppeteer-core')).default
+} catch {
+  console.error('puppeteer-core is not installed. Run: npm i -D puppeteer-core')
+  process.exit(2)
+}
+
+const BASE = process.env.ATS_BASE_URL || 'http://localhost:5173'
+const CHROME = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
+const EMAIL = process.env.ATS_TEST_EMAIL || 'ats.tester@example.com'
+const PASSWORD = process.env.ATS_TEST_PASSWORD || 'Test12345!'
+
+// Keep in sync with src/app/routes.js (paths only — titles don't matter here).
+const ROUTES = [
+  'dashboard', 'inbox', 'matching', 'jobs', 'candidates', 'talentpool', 'pipeline',
+  'progress', 'import', 'jobboard', 'recruiterhub', 'talent', 'tasks', 'aiassistant',
+  'interviews', 'requisitions', 'assessments', 'offers', 'managers', 'calendar',
+  'reports', 'analytics', 'aistudio', 'notifications', 'rbac', 'settings', 'help',
+]
+const WIDTHS = [320, 375, 390, 430, 768]
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+
+const browser = await puppeteer.launch({
+  executablePath: CHROME,
+  headless: true,
+  args: ['--no-sandbox'],
+  defaultViewport: { width: 320, height: 800, isMobile: true, hasTouch: true },
+})
+
+const failures = []
+const runtimeErrors = []
+try {
+  const page = await browser.newPage()
+  page.on('pageerror', (e) => runtimeErrors.push(`${page.url()}: ${e.message.split('\n')[0]}`))
+
+  await page.goto(`${BASE}/auth/login`, { waitUntil: 'domcontentloaded', timeout: 30000 })
+  await sleep(1000)
+  if (await page.$('input[type=password]')) {
+    const email = await page.$('input:not([type=password])')
+    await email.type(EMAIL)
+    await page.type('input[type=password]', PASSWORD)
+    await Promise.all([
+      page.click('button[type=submit]'),
+      page.waitForNavigation({ waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {}),
+    ])
+    await sleep(1500)
+  }
+
+  for (const route of ROUTES) {
+    for (const w of WIDTHS) {
+      await page.setViewport({ width: w, height: 800, isMobile: w < 768, hasTouch: w < 768 })
+      await page.goto(`${BASE}/${route}`, { waitUntil: 'domcontentloaded', timeout: 30000 })
+      await sleep(1500)
+      let rep
+      try {
+        rep = await page.evaluate(() => {
+          const doc = document.documentElement
+          const content = document.querySelector('.content')
+          return {
+            docOverflow: doc.scrollWidth - doc.clientWidth,
+            contentOverflow: content ? content.scrollWidth - content.clientWidth : 0,
+          }
+        })
+      } catch {
+        await sleep(1500)
+        continue // page navigated mid-evaluate; the next loop iteration re-covers it
+      }
+      if (rep.docOverflow > 1) failures.push(`${route} @${w}: document scrolls sideways by ${rep.docOverflow}px`)
+      if (rep.contentOverflow > 1) failures.push(`${route} @${w}: .content scrolls sideways by ${rep.contentOverflow}px`)
+    }
+    process.stdout.write('.')
+  }
+  console.log('')
+} finally {
+  await browser.close()
+}
+
+// 4xx/5xx fetch noise is backend behaviour, not a layout bug — only genuine
+// script errors (pageerror) fail the run.
+if (failures.length || runtimeErrors.length) {
+  for (const f of failures) console.error('FAIL  ' + f)
+  for (const e of runtimeErrors) console.error('ERROR ' + e)
+  console.error(`\n${failures.length} overflow failure(s), ${runtimeErrors.length} runtime error(s)`)
+  process.exit(1)
+}
+console.log(`All ${ROUTES.length} routes clean at ${WIDTHS.join('/')}px — no sideways scroll, no runtime errors`)

frontend/package.json

@@ -11,6 +11,7 @@
     "smoke": "node smoke.test.mjs",
     "test:token": "node token.test.mjs",
     "test:theme": "node theme.test.mjs",
+    "test:mobile": "node mobile.test.mjs",
     "verify": "vite build && node smoke.test.mjs && node token.test.mjs && node theme.test.mjs"
   },
   "dependencies": {
@@ -24,6 +25,7 @@
     "@vitejs/plugin-react": "^4.5.0",
     "esbuild": "^0.28.1",
     "jsdom": "^30.0.1",
+    "puppeteer-core": "^23.11.1",
     "vite": "^6.3.5"
   }
 }

frontend/src/__smoke__/entry.jsx

@@ -30,6 +30,7 @@ import Jobs from '../screens/Jobs'
 import Candidates from '../screens/Candidates'
 import TalentPool from '../screens/TalentPool'
 import Pipeline from '../screens/Pipeline'
+import Progress from '../screens/Progress'
 import CvImport from '../screens/CvImport'
 import JobBoard from '../screens/JobBoard'
 import RecruiterHub from '../screens/RecruiterHub'
@@ -52,7 +53,7 @@ import Help from '../screens/Help'
 
 const SCREENS = {
   dashboard: Dashboard, inbox: Inbox, matching: Matching, jobs: Jobs, candidates: Candidates,
-  talentpool: TalentPool, pipeline: Pipeline, import: CvImport, jobboard: JobBoard,
+  talentpool: TalentPool, pipeline: Pipeline, progress: Progress, import: CvImport, jobboard: JobBoard,
   recruiterhub: RecruiterHub, talent: Talent, tasks: Tasks, aiassistant: AiAssistant,
   interviews: Interviews, requisitions: Requisitions, assessments: Assessments, offers: Offers,
   managers: Managers, calendar: Calendar, reports: Reports, analytics: Analytics,

frontend/src/lib/charts.js

@@ -189,6 +189,9 @@ function css(name) { return getComputedStyle(document.documentElement).getProper
       const slot = plotW / data.length, bw = Math.min(46, slot * 0.6);
       bars.length = 0;
       ctx.font = FONT(11); ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      // Same thinning as line(): a "MMM YYYY" label is ~54px, and on phone
+      // widths seven of them smeared into one unreadable strip.
+      const labelEvery = Math.max(1, Math.ceil(56 / slot));
       data.forEach((v, i) => {
         const x = pad.l + slot * i + slot / 2;
         const bh = (v * prog / max) * plotH;
@@ -200,7 +203,7 @@ function css(name) { return getComputedStyle(document.documentElement).getProper
         const color = (colors && colors[i]) || pal[0];
         roundRect(ctx, x - bw / 2, y, bw, bh, 5); ctx.fillStyle = color; ctx.fill();
         ctx.fillStyle = tc.text;
-        ctx.fillText(labels[i].length > 9 ? labels[i].slice(0, 8) + '…' : labels[i], x, h - pad.b + 8);
+        if (i % labelEvery === 0) ctx.fillText(labels[i].length > 9 ? labels[i].slice(0, 8) + '…' : labels[i], x, h - pad.b + 8);
         bars.push({ x: x - bw / 2, y, w: bw, h: bh, cx: x, cy: y, label: labels[i], v });
       });
     }
@@ -224,6 +227,7 @@ function css(name) { return getComputedStyle(document.documentElement).getProper
       const groupW = bw * datasets.length + (datasets.length - 1) * 3;
       bars.length = 0;
       ctx.font = FONT(11); ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      const labelEvery = Math.max(1, Math.ceil(56 / slot));
       labels.forEach((lbl, i) => {
         const gx = pad.l + slot * i + slot / 2 - groupW / 2;
         datasets.forEach((ds, di) => {
@@ -235,7 +239,7 @@ function css(name) { return getComputedStyle(document.documentElement).getProper
           bars.push({ x, y, w: bw, h: bh, label: lbl + ' · ' + ds.label, v });
         });
         ctx.fillStyle = tc.text;
-        ctx.fillText(lbl.length > 9 ? lbl.slice(0, 8) + '…' : lbl, pad.l + slot * i + slot / 2, h - pad.b + 8);
+        if (i % labelEvery === 0) ctx.fillText(lbl.length > 9 ? lbl.slice(0, 8) + '…' : lbl, pad.l + slot * i + slot / 2, h - pad.b + 8);
       });
     }
     animate(render);

frontend/src/screens/Analytics.jsx

@@ -90,11 +90,10 @@ function AskAnalyticsCard() {
       <div className="card-body">
         <form
           noValidate
-          className="flex items-center gap-8"
+          className="ask-form"
           onSubmit={(e) => { e.preventDefault(); submit() }}
         >
           <input
-            style={{ flex: 1 }}
             value={question}
             maxLength={500}
             onChange={(e) => setQuestion(e.target.value)}

frontend/src/screens/Candidates.jsx

@@ -472,11 +472,15 @@ function RecruiterCandidates() {
               <Icon name="filter" /> Filters
             </button>
             <div className="spacer" />
-            <label className="text-muted text-sm">Sort:</label>
-            <select className="select" value={sortMode} onChange={(e) => setSortMode(e.target.value)}>
-              <option value="recent">Most Recent</option>
-              <option value="name">Name A–Z</option>
-            </select>
+            {/* One flex group so the label and select wrap together on phones
+                instead of stranding "Sort:" at the end of the previous row. */}
+            <div className="flex items-center gap-8">
+              <label className="text-muted text-sm">Sort:</label>
+              <select className="select" value={sortMode} onChange={(e) => setSortMode(e.target.value)}>
+                <option value="recent">Most Recent</option>
+                <option value="name">Name A–Z</option>
+              </select>
+            </div>
           </div>
 
           {showFilters && (

frontend/src/styles/styles.css

@@ -543,7 +543,11 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
    and the DOCUMENT is the real scroller. `contain` on this (non-scrolling)
    scroll container blocked wheel chaining — the wheel was dead everywhere
    except dragging the scrollbar thumb. */
-.content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
+/* overflow-x: clip (computes to hidden beside overflow-y: auto) — the pane
+   must never pan sideways; a stray pixel of overflow otherwise turns every
+   touch drag into a wiggle. All intended horizontal scrolling lives in
+   .table-wrap / .kanban / .tabs. */
+.content { flex: 1; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
 .page { animation: fadeUp .3s ease; }
 @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
@@ -582,6 +586,11 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
 .card-body { padding: var(--space-5); }
 
 .grid { display: grid; gap: var(--gap); }
+/* Grid items default to min-width:auto, so one wide intrinsic child (a select's
+   longest option, a min-width table inside .table-wrap) silently forces the
+   whole track past the viewport on phones — the classic grid blowout. Letting
+   items shrink is invisible on desktop, where tracks exceed min-content anyway. */
+.grid > *, .rbac-layout > * { min-width: 0; }
 .g-kpi { grid-template-columns: repeat(4, 1fr); }
 .g-3 { grid-template-columns: repeat(3, 1fr); }
 .g-2 { grid-template-columns: repeat(2, 1fr); }
@@ -925,7 +934,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
 }
 
 /* Calendar */
-.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+/* minmax(0,1fr): plain 1fr floors each column at its max-content, so on a
+   narrow phone SAT slid past the card edge and was clipped unreachable. */
+.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
 .cal-dow { background: var(--bg-elev); padding: 10px; text-align: center; }
 .cal-cell { background: var(--bg-elev); min-height: 108px; padding: 8px; position: relative; transition: .12s; }
 .cal-cell:hover { background: var(--bg-sunken); }
@@ -955,12 +966,25 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 /* Tooltip */
 [data-tip] { position: relative; }
-[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg-elev); padding: 5px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s; z-index: 100; }
-[data-tip]:hover::after { opacity: 1; }
+/* display:none until hover — the opacity-0 box used to sit in the layout and
+   quietly add horizontal scroll area whenever a tipped button hugged a card
+   edge. fadeIn on the display flip keeps the appear animation. */
+[data-tip]::after { content: attr(data-tip); display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg-elev); padding: 5px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 100; }
+[data-tip]:hover::after { display: block; animation: fadeIn .15s; }
 /* Hover tooltips have no dismiss gesture on touch and stick after a tap. */
 @media (hover: none) { [data-tip]::after { content: none; } }
 [data-theme="dark"] [data-tip]::after { background: var(--brand-lime); color: var(--brand-ink); }
 
+/* Ask Analytics (Analytics.jsx). The bare input used to render unstyled and
+   the row never wrapped, pushing the Ask button past a 320px viewport. */
+.ask-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ask-form input {
+  flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 9px;
+  background: var(--bg-elev); border: 1px solid var(--border-strong);
+  outline: none; transition: .15s;
+}
+.ask-form input:focus { border-color: var(--primary); box-shadow: var(--ring); }
+
 /* Segmented insight bars */
 .mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
 .mini-bar { flex: 1; background: var(--primary-soft); border-radius: 3px 3px 0 0; min-height: 4px; transition: .3s; }
@@ -1367,7 +1391,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .star-btn.on svg { fill: currentColor; }
 
 /* Segmented control */
-.seg { display: inline-flex; background: var(--bg-sunken); padding: 3px; border-radius: 10px; }
+/* flex-wrap only engages when the pills outgrow the row (phones) — on desktop
+   the control renders exactly as before. */
+.seg { display: inline-flex; flex-wrap: wrap; background: var(--bg-sunken); padding: 3px; border-radius: 10px; }
 .seg button { padding: 6px 14px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
 .seg button.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }
 
@@ -1494,6 +1520,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .nav-open .ai-fab { display: none; }
   .icon-btn.menu-toggle { display: grid; }
   .search-kbd { display: none; }
+  /* A toolbar or date nav beside the title no longer fits on one line;
+     wrapping drops it below the heading instead of forcing the card wide. */
+  .card-head { flex-wrap: wrap; }
   .content { padding: 20px max(16px, env(safe-area-inset-left)) 50px max(16px, env(safe-area-inset-right)); }
   .profile-meta { display: none; }
   .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@@ -1554,6 +1583,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .ai-dock { width: 100%; max-width: 100%; }
   .split-list { max-height: 320px; }
 
+  /* When the Ask button wraps under the input, let it take the full row. */
+  .ask-form .btn { flex: 1 1 auto; }
+
   /* Find Talent: stack the toolbar controls edge to edge. */
   .talent-controls .tc-job, .talent-controls .tc-loc,
   .talent-controls .tc-custom, .talent-controls .btn {
@@ -1567,7 +1599,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .card-body, .card-pad { padding: 16px; }
   .kpi { padding: 16px; }
   .tabs { gap: 0; }
-  .cal-cell { min-height: 76px; }
+  .cal-cell { min-height: 64px; padding: 5px 4px; }
+  .cal-dow { padding: 8px 3px; }
+  .cal-event { padding: 2px 4px; }
   .chat-msg { gap: 10px; }
   .brand-hero .card-body { padding: 22px 18px; }
   .stepper { overflow-x: auto; padding-bottom: 6px; }
@@ -1584,14 +1618,16 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .user-cell .cell-sub {
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
   }
-  /* Sticky identity column keeps context while scrolling the rest. */
-  table.data thead th:nth-child(2),
-  table.data tbody td:nth-child(2) {
+  /* Sticky identity column keeps context while scrolling the rest.
+     Every table leads with its identity cell (no checkbox columns), so the
+     first column is the one to pin — nth-child(2) pinned email/role instead. */
+  table.data thead th:first-child,
+  table.data tbody td:first-child {
     position: sticky; left: 0; z-index: 2;
     background: var(--bg-elev);
     box-shadow: 1px 0 0 var(--border);
   }
-  table.data tbody tr:hover td:nth-child(2) { background: var(--bg-sunken); }
+  table.data tbody tr:hover td:first-child { background: var(--bg-sunken); }
 }
 
 /* Small phones (iPhone SE / older Android at 320–400px). */
@@ -1788,6 +1824,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 12px; margin-bottom: 18px;
 }
+/* Same grid-blowout guard as .grid > *: without it a stage label's longest
+   word set the track floor and pushed the row past a 320px viewport. */
+.progress-stage-grid > * { min-width: 0; }
 .progress-stage {
   background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
   padding: 14px;
@@ -1859,6 +1898,10 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .progress-stage-grid { grid-template-columns: repeat(2, 1fr); }
   .progress-filter-head .select { width: 100%; min-width: 0; }
 }
+/* Small phones: two columns leave ~56px for a stage label — stack instead. */
+@media (max-width: 400px) {
+  .progress-stage-grid { grid-template-columns: 1fr; }
+}
 
 /* ============================================================
    ≤640 / ≤400 — consolidated phone rules for the late bolt-on sections