From e0db347db72164c068104c012a2f86dbbaef02b1 Mon Sep 17 00:00:00 2001 From: Ishwari Deshmukh Date: Mon, 27 Jul 2026 13:19:25 +0530 Subject: [PATCH 1/2] fix: make Employer Assessment page responsive on mobile/narrow screens Fixes #4 Root cause: the 3-column layout (h-dvh + overflow-hidden on
+ overflow-y-auto per pane) was designed for desktop's side-by-side independent scrolling. On mobile the columns stack (grid-cols-1), but overflow-hidden clipped everything past viewport height instead of scrolling, so the 'Consult the AI' question bar (last item in the right column) became unreachable. Fix: scope the fixed-height/clip/independent-scroll behavior to lg: and above, so mobile falls back to normal page scroll. Also added lg:min-h-0 to fix grid items' default min-height:auto blocking their own overflow scroll on desktop, and gave the report panel a sane min-height on mobile instead of h-full collapsing to 0. --- app/assessment/page.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assessment/page.tsx b/app/assessment/page.tsx index ff3b50cd..37af9b92 100644 --- a/app/assessment/page.tsx +++ b/app/assessment/page.tsx @@ -303,7 +303,7 @@ function AssessmentContent() { ]; return ( -
+
@@ -346,10 +346,10 @@ function AssessmentContent() {
)} -
+
{/* Left Sidebar: Profile & Hirability */} -