Skip to content

bug: Inconsistent Vertical Padding in Course Sidebar #1892

@pranayburra

Description

@pranayburra

The vertical padding (Y-axis spacing) inside the Course Sidebar Drawer appears too tight on screens below the 2xl (1536px) breakpoint.
As a result, the content touches the bottom edge, and the last element becomes partially or completely hidden

To Reproduce
Steps to reproduce the behavior:
1.Open any course page (e.g.,https://app.100xdevs.com/courses/1). or any url having more elements in courses
2.Click the Course Content button to open the right sidebar.
3.Resize the browser window to a width below 1536px (e.g., 1440px or 1280px).
4.Scroll to the bottom of the sidebar.
5.Observe that the last module item is clipped or not fully visible.

Expected behavior
1.Consistent vertical padding (py) should be applied across all breakpoints, not just on 2xl.
2.The last element in the sidebar should be fully visible regardless of screen width.

Screenshots or GIFs

before

Image

after

Image

Info (please complete the following information):
Environment
Framework: Next.js
Styling: Tailwind CSS
Browser: Chrome / Edge
OS: Windows 11
Screen Width: < 1536px (before 2xl breakpoint)

Additional context
This is a UI layout issue only. The functionality of the drawer works as expected, but the user experience is affected on smaller screens due to missing vertical spacing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions