Mobile responsiveness: fix grid blowouts, calendar clipping, wrapping controls; add viewport test
Audited all 25 routes at 320/375/390/430/768 with browser automation. Root cause of most overflows: grid items default min-width:auto, so one wide intrinsic child (a select option, the 620px RBAC matrix) pushed whole cards past the viewport. - .grid > * / .rbac-layout > * min-width:0 (CV Import, Interviews, Tasks, Access Control card blowouts) - calendar: minmax(0,1fr) columns — SAT was clipped off-screen at 320 - .seg wraps (Tasks filters), .card-head wraps <=900 - sticky mobile table column: first column (identity), was nth-child(2) - tooltips display:none until hover + .content overflow-x clip (killed a 7px sideways wiggle from invisible tooltip boxes) - Ask Analytics form: design-system input styling, stacks on phones - bar/grouped-bar charts thin x labels by slot width (overlap on phones) - Candidates sort label+select wrap as one unit - new: mobile.test.mjs + npm run test:mobile (puppeteer-core devDep, drives installed Chrome) — fails on sideways scroll or runtime errors Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>pull/46/head
parent
a68cc43455
commit
14c78970bd
|
|
@ -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',
|
||||
'import', 'jobboard', 'recruiterhub', 'talent', 'tasks', 'aiassistant',
|
||||
'interviews', '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`)
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -343,11 +343,15 @@ export default function Candidates() {
|
|||
<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 && (
|
||||
|
|
|
|||
|
|
@ -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). */
|
||||
|
|
|
|||
Loading…
Reference in New Issue