From ea43b02b99e68fcdc87e8f105f9e8160c57f92d4 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Wed, 2 Sep 2026 15:32:23 +0500
Subject: [PATCH] Post-merge: Progress screen mobile fixes, register Progress
 in smoke harness

- .progress-stage-grid gets the same min-width:0 blowout guard as .grid,
  and stacks to one column under 400px (two columns left ~56px for a
  stage label at 320)
- mobile.test.mjs: add the new progress/requisitions routes (27 total)
- __smoke__/entry.jsx: main added the /progress route but never
  registered the Progress screen in the harness map, so the smoke test
  rendered h(undefined) and /progress failed on main itself

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/mobile.test.mjs         | 4 ++--
 frontend/src/__smoke__/entry.jsx | 3 ++-
 frontend/src/styles/styles.css   | 7 +++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/mobile.test.mjs b/frontend/mobile.test.mjs
index d276c85..78bc00a 100644
--- a/frontend/mobile.test.mjs
+++ b/frontend/mobile.test.mjs
@@ -34,8 +34,8 @@ 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',
+  '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]
diff --git a/frontend/src/__smoke__/entry.jsx b/frontend/src/__smoke__/entry.jsx
index bec997e..c06942c 100644
--- a/frontend/src/__smoke__/entry.jsx
+++ b/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,
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index dba7749..35728d9 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1824,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;
@@ -1895,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