[ENHANCEMENT]: Roadmap page is not scrollable, allow scroll and drag down options

[srinjayeeg]

Current Behavior

The roadmap page is not scrollable and can only be accessed using the box. When visiting the AI Java Full Stack Engineer roadmap (and likely other roadmap pages), the page content gets cut off and users are unable to scroll down to view the rest of the roadmap. This makes the majority of the content completely inaccessible.

Affected Page:
https://www.internhack.xyz/learn/roadmaps/ai-13-java-full-stack-engineer-roadmap-for-saas-giants-mpkvaudg

-Navigate to the roadmap page linked above
-Attempt to scroll down using mouse wheel, trackpad, or scrollbar
-The page does not scroll hence content below the visible viewport is unreachable

Suggested Improvement

This is likely caused by one of the following CSS issues on the roadmap page container or a parent element:

overflow: hidden applied to body, html, or a wrapper div
height: 100vh or height: 100% on a container without overflow-y: auto/scroll
A fixed/absolute positioned overlay blocking scroll events
A ReactFlow or similar canvas component capturing all scroll events without propagating them

Scroll can be enabled by

csshtml, body {
  overflow-y: auto; /* or scroll */
  height: auto;
}

Or if using a container div:

css.roadmap-container {
overflow-y: auto;
max-height: 100vh;
}

Benefits

``
Ease in accessing and understanding the generated roadmap

Possible Implementation

No response

[Anshika-Gupta9]

Hi, I'd like to work on this issue. Could you please assign it to me?

[codewithharshit17]

Hi @Sachinchaurasiya360 , I am a GSSoC’26 contributor and would like to work on this issue.

Proposed approach:

• I will first inspect the roadmap page layout to identify where scroll is being blocked (for example, overflow: hidden on html, body, or a wrapper, or a height: 100vh / 100% container without overflow-y enabled).
• Next, I will check the roadmap canvas/ReactFlow (or similar) container to ensure it does not capture all scroll events; if it does, I will allow scroll events to propagate while still supporting canvas interactions.
• I will then introduce a dedicated scrollable container for the roadmap section (for example, a .roadmap-container div) with styles like overflow-y: auto and max-height: 100vh so that users can scroll through the entire roadmap content.
• I will test the fix across different viewport sizes (desktop and smaller screens) to confirm that the page remains scrollable and the roadmap remains interactive, without breaking other pages.

Once this approach is approved, I will implement the changes and raise a PR following the project’s contributing guidelines.

Could you please assign this issue to me?

Thank you!

[Xenon010101]

Hi! I'd like to take this one. The fix is straightforward — change the container's CSS from \overflow: hidden\ to \overflow-y: auto\ so the roadmap content is scrollable. Could you please assign this to me?