From 967c1acc5cea55845d385196749769451fe0f3b0 Mon Sep 17 00:00:00 2001 From: Talha Ahmed Date: Tue, 25 Aug 2026 21:55:00 +0500 Subject: [PATCH] ui-polish 6/6: responsive consolidation - .g-3 grids step 3 -> 2 columns at 1200px and 2 -> 1 at 900px; they used to jump straight to one column, wasting the whole 900-1200 band (Managers cards, Help topics, JobBoard destinations). - The four scattered trailing @media 640px fragments (Dashboard v2 grid, candidate page, hiring forms) merged into ONE labeled block at the end of the file, positioned after every base rule; the paired 400px override moves with it so small-phone rules still win. The core shell 640 block stays put so the landscape-phone height rules keep their existing precedence. - Every breakpoint labeled; responsive section header updated. Co-Authored-By: Claude Fable 5 --- frontend/src/styles/styles.css | 51 ++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css index 5f6d99c..3bdca50 100644 --- a/frontend/src/styles/styles.css +++ b/frontend/src/styles/styles.css @@ -1295,9 +1295,11 @@ canvas { width: 100%; max-width: 100%; display: block; } /* ============================================================ RESPONSIVE - ≥1600 ultrawide · 1200 laptop · 980 tablet-landscape - 900 tablet-portrait (sidebar goes off-canvas) · 640 phone - 400 small phone · plus a landscape-phone height rule + 1200 laptop · 980 tablet-landscape · 900 tablet-portrait (sidebar + goes off-canvas) · 640 phone · 400 small phone · plus a + landscape-phone height rule. Late bolt-on sections (Dashboard v2, + hiring forms) keep their 1400/1200/860 steps next to their base + rules and share ONE consolidated 640/400 block at the end of file. ============================================================ */ /* Cap the measure on every desktop, not only ultrawide — between 900 and @@ -1305,12 +1307,15 @@ canvas { width: 100%; max-width: 100%; display: block; } agrees with .cand-page's own 1440px cap. */ .content > .page { max-width: 1440px; margin-inline: auto; } +/* ≤1200 — laptop. .g-3 steps 3→2 here and 2→1 at 900; it used to jump + straight to one column, wasting the whole 900–1200 band. */ @media (max-width: 1200px) { .g-kpi { grid-template-columns: repeat(2, 1fr); } - .g-3 { grid-template-columns: 1fr; } + .g-3 { grid-template-columns: repeat(2, 1fr); } .g-2-1, .g-1-2, .g-2 { grid-template-columns: 1fr; } .filter-panel { grid-template-columns: repeat(3, 1fr); } } +/* ≤980 — tablet landscape */ @media (max-width: 980px) { .split { grid-template-columns: 1fr; } .split-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 380px; } @@ -1318,7 +1323,9 @@ canvas { width: 100%; max-width: 100%; display: block; } .filter-panel { grid-template-columns: repeat(2, 1fr); } .rbac-matrix { min-width: 620px; } /* scrolls inside .table-wrap */ } +/* ≤900 — tablet portrait: the sidebar goes off-canvas */ @media (max-width: 900px) { + .g-3 { grid-template-columns: 1fr; } .sidebar { /* above the scrim (55) but below the AI dock (310) and modals (300), so an open drawer never sits on top of a dialog. */ @@ -1336,6 +1343,8 @@ canvas { width: 100%; max-width: 100%; display: block; } .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .chat-wrap { height: calc(100vh - 170px); height: calc(100dvh - 170px); } } +/* ≤640 — phone (core shell + components; late-section 640 rules live in the + consolidated block at the end of the file, after their base rules) */ @media (max-width: 640px) { .g-kpi { grid-template-columns: 1fr; } .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; } @@ -1487,9 +1496,6 @@ canvas { width: 100%; max-width: 100%; display: block; } .g-kpi-7 { grid-template-columns: repeat(2, 1fr); } .pipe-split { grid-template-columns: 1fr; } } -@media (max-width: 640px) { - .g-kpi-7 { grid-template-columns: 1fr; } -} /* ============================================================ Hiring forms — the candidate profile Forms tab (CandidateForms.jsx). @@ -1561,26 +1567,29 @@ canvas { width: 100%; max-width: 100%; display: block; } /* The four-form switcher must wrap rather than overflow on narrow screens. */ .cand-page .seg { flex-wrap: wrap; } +/* Rating-table scale header: full words down to 640px, bare numbers below. */ +.hf-scale-short { display: none; } + +/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */ +.hf-cta { padding: 11px 26px; font-size: 14.5px; } + +/* ============================================================ + ≤640 / ≤400 — consolidated phone rules for the late bolt-on sections + (Dashboard v2 grid, candidate page, hiring forms). Kept in ONE block + at the end of the file so they always follow their base rules; the + core shell's 640 rules live in the RESPONSIVE section above. + ============================================================ */ @media (max-width: 640px) { + .g-kpi-7 { grid-template-columns: 1fr; } .cand-page-actions { width: 100%; } .cand-page-actions .btn { flex: 1 1 auto; justify-content: center; } .hf-sign-grid { grid-template-columns: 1fr; } .hf-summary { grid-template-columns: repeat(2, 1fr); } + .hf-scale-full { display: none; } + .hf-scale-short { display: inline; font-size: var(--fs-xs); } + .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); } + .hf-cta { width: 100%; max-width: 420px; justify-content: center; } } @media (max-width: 400px) { .hf-summary { grid-template-columns: 1fr; } } - -/* Rating-table scale header: full words down to 640px, bare numbers below. */ -.hf-scale-short { display: none; } -@media (max-width: 640px) { - .hf-scale-full { display: none; } - .hf-scale-short { display: inline; font-size: 12px; } - .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); } -} - -/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */ -.hf-cta { padding: 11px 26px; font-size: 14.5px; } -@media (max-width: 640px) { - .hf-cta { width: 100%; max-width: 420px; justify-content: center; } -}