fix: make Employer Assessment page responsive on mobile/narrow screens

[ishhwarrii]

🔗 Related Issue

Closes #4

---

📝 Description of Changes

This PR enhances the Employer Assessment page for mobile devices and smaller screen widths by improving its responsive layout.

What's changed

• Restricted the fixed viewport height and independent scrolling behavior to large screens (lg) only.
• Enabled standard page scrolling on mobile devices so users can navigate through the entire page naturally.
• Added lg:min-h-0 to grid items to ensure desktop panels maintain proper independent scrolling.
• Updated the report panel layout to prevent height collapse on smaller screens.
• Ensured the "Consult the AI" section and all assessment content remain fully accessible on mobile.

These changes preserve the desktop experience while providing a smoother and more intuitive experience on narrow screens.

---

🏷️ Proposed Labels

• UI/UX
• Documentation
• CI/CD
• Backend Logic
• Anything else

---

📂 Core Files Changed

• Employer Assessment page
• Responsive layout and grid configuration
• Mobile overflow and scrolling behavior

---

📸 Verification & Screenshots

• UI/UX (User Interface / User Experience - how it looks and feels):

  • Tested on desktop, tablet, and mobile viewports.
  • Verified that the complete assessment flow, including the "Consult the AI" section, is accessible on smaller screens.
  • Confirmed that the desktop multi-column layout and scrolling behavior remain unchanged.

• CI/CD (Continuous Integration / Continuous Deployment - the automated build/test pipeline):

  • Application runs successfully in the local development environment.
  • No regressions or layout issues observed during testing.

---

🤖 AI Assistance Declaration

Did you use an AI tool to write or assist with this code OR Pull Request?

• Yes
• No

⚠️ IF YOU CHECKED "YES", YOU MUST ANSWER THE FOLLOWING:

• Which AI Model did you use? Claude Sonnet 5
• Which Platform/Tool? Claude
• What exactly did the AI do? Assisted in analyzing the responsiveness issue, suggesting implementation approaches, and improving the Pull Request documentation.
• What exactly did YOU do? Identified the root cause, implemented the responsive layout updates, verified the changes across different screen sizes, and reviewed the final solution before submission.
• What is the advantage of using this AI approach here? It streamlined the problem analysis and documentation process while I remained responsible for the implementation, testing, and validation.

---

⚠️ Reviewer Notes

This PR focuses exclusively on responsive layout improvements. Desktop behavior has been preserved, while mobile users can now scroll through the page normally and access all content without layout issues.

---

✅ The "I Swear I Didn't Break Anything" Pledge

• I have thoroughly tested these changes in my own local branch.
• I verified multiple times that this code compiles into a standalone build and does not break existing production features.

Summary by Sourcery

Improve the Employer Assessment page layout to behave responsively on mobile and narrow screens while preserving the desktop experience.

Enhancements:

• Adjust overall page height handling so full-page scrolling is enabled on smaller viewports and fixed viewport height is limited to large screens.
• Update main grid and side panels to only use independent scrolling on large screens, ensuring content remains accessible on mobile.
• Refine the detailed report panel and right sidebar sizing to avoid height collapse on small screens and maintain consistent panel heights on desktop.

Summary by CodeRabbit

• Bug Fixes
  • Improved responsive layout behavior on the assessment page with more reliable viewport sizing.
  • Enhanced large-screen scrolling and min-height behavior across sidebars and the detailed report section.
  • Updated the “Detailed Assessment Output” panel height constraints for better cross-screen usability.
• New Features
  • Added Markdown export from the assessment page, including a brief “Exported!” confirmation on the download button.
• Chores
  • Updated version control ignore settings to prevent tracking TypeScript incremental build artifacts.

Screenshots:

[vercel]

@ishhwarrii is attempting to deploy a commit to the Yuvraj Sarathe's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The assessment page now uses responsive viewport heights, large-screen-only internal scrolling, adjusted sidebar sizing, and responsive detailed output panel constraints. The TypeScript incremental build artifact is also ignored.

Changes

Responsive assessment layout

Layer / File(s)	Summary
Responsive height and scrolling app/assessment/page.tsx	The page container, sidebars, detailed report, and per-repository output panel use responsive height, overflow, minimum-height, and padding classes for narrower and large screens.

Repository hygiene

Layer / File(s)	Summary
TypeScript build artifact ignore .gitignore	Adds tsconfig.tsbuildinfo to the ignored files.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• Yuvraj-Sarathe/GitDeep#26: Contains overlapping Markdown export implementation changes for the assessment page.

Suggested reviewers: yuva-deekshitha-n

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The Markdown export UI and tsbuildinfo .gitignore update are unrelated to the mobile responsiveness issue.	Move the Markdown export and .gitignore changes to a separate PR or link them to a related issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The layout changes address the mobile/narrow-screen responsiveness problem and keep the questions bar/content reachable.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: improving the Employer Assessment page for mobile and narrow screens.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Fix failing CI checks

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sourcery-ai]

🧙 Sourcery has finished reviewing your pull request!

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Yuvraj-Sarathe]

Make sure your changes align with the linting tests.

You can check why this is failing by either visiting logs or just simply switching to the Files Changed tab in the PR.

[Yuvraj-Sarathe]

@ishhwarrii since this is a UI PR, please add screenshots of verification, and I can merge the PR right away!

[ishhwarrii]

@Yuvraj-Sarathe Have uploaded the screenshots! please checkout.