Merge branch 'main' of https://git.utopiadeals.com/utopia-ai/HR-ATS-Portal into add_history_logs

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). */
@@ -1860,6 +1896,49 @@ canvas { width: 100%; max-width: 100%; display: block; }
   display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 4px;
 }
 
+.progress-stage-grid {
+  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;
+}
+.progress-stage-head {
+  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+.progress-stage-icon {
+  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
+}
+.progress-stage-icon svg { width: 13px; height: 13px; }
+.progress-stage-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; min-width: 0; }
+.progress-stage-pct { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
+.progress-stage-value {
+  display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600;
+  letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px;
+}
+.progress-stage-meter {
+  height: 4px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden;
+}
+.progress-stage-meter > i { display: block; height: 100%; border-radius: 99px; }
+
+.progress-stage.stage-blue .progress-stage-icon { background: var(--info-soft); color: var(--info); }
+.progress-stage.stage-blue .progress-stage-meter > i { background: var(--info); }
+.progress-stage.stage-purple .progress-stage-icon { background: var(--purple-soft); color: var(--purple); }
+.progress-stage.stage-purple .progress-stage-meter > i { background: var(--purple); }
+.progress-stage.stage-amber .progress-stage-icon { background: var(--warning-soft); color: var(--warning); }
+.progress-stage.stage-amber .progress-stage-meter > i { background: var(--warning); }
+.progress-stage.stage-indigo .progress-stage-icon { background: var(--primary-soft); color: var(--primary); }
+.progress-stage.stage-indigo .progress-stage-meter > i { background: var(--primary); }
+.progress-stage.stage-teal .progress-stage-icon { background: var(--teal-soft); color: var(--teal); }
+.progress-stage.stage-teal .progress-stage-meter > i { background: var(--teal); }
+.progress-stage.stage-red .progress-stage-icon { background: var(--danger-soft); color: var(--danger); }
+.progress-stage.stage-red .progress-stage-meter > i { background: var(--danger); }
+
+.progress-bar-wrap { margin-top: 4px; }
 .progress-bar-wrap { margin-top: 0; }
 .progress-bar-labels {
   display: flex; justify-content: space-between; gap: 12px;
@@ -1963,6 +2042,10 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .progress-sidebar-controls { flex-wrap: wrap; }
   .progress-sort-chip { width: 100%; text-align: center; }
 }
+/* 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