Implement Independent Scrolling for Sidebar and Content Area

[singhrishiranjan]

Overview
The platform layout uses a split-view (sidebar and content area). While scrolling directly on the content list works as expected, scrolling within the area below it or over the entire right section triggers a full-page scroll. This breaks the "fixed-dashboard" feel and causes the header to move out of the viewport.

Current Behavior
The sidebar and main content sections do not have independent scroll containers.
Scrolling within the left section below the list of contents causes the entire page to scroll vertically. We get to experience the same when we try to scroll within the right section.

Expected Behavior
The layout should feel like a "Single Page App" where the outer shell (header and section boundaries) remains static. Scrolling anywhere within the left or right columns should either:

• Scroll that specific column (if content exceeds height).
• Do nothing (if content is short), but never scroll the background/entire page.
• The top navigation bar and the video player (optionally) should remain fixed.

Steps to Reproduce

• Open a course module.
• Move the cursor to the area at the bottom of the left sidebar (over "Courses", "Dashboard", username area)
• Attempt to scroll down.
• Observe: The entire website UI moves up.
• Repeat this by scrolling over the video on the right section.

Visual Evidence

Recording.2026-05-02.124124.mp4

Please refer to the attached screen recording for a demonstration of the current scrolling behavior: