UI Issue: Lesson Content Overlaps Sidebar on Learn Cypress

[hadiimran00]

Description

The course content is overlapping with the text in the sidebar.

URL of Issue(s)

https://learn.cypress.io/advanced-cypress-concepts/database-initialization-and-seeding

Steps to replicate

1. Make the zoom of your browser at 100%
2. Navigate to: learn.cypress.io
3. Click: "Start Learning"
4. Click: "Advanced Cypress Testing Concepts"
5. Click: Any lesson within "Advanced Cypress Testing Concepts"
6. Observe: The lesson content overlaps with the text in the sidebar, hindering readability and user experience.

Browser

Google Chrome Version 119.0.6045.200 (Official Build) (64-bit)

Device

• PC
• Mac
• iPhone
• iPad
• Android Phone
• Android Tablet

Additional Information

Screenshot:

Expected Result:
The lesson content should be displayed without overlap, allowing for clear and unobstructed reading.

Actual Result:
Lesson content overlaps with the text in the sidebar, making it difficult to read and navigate the learning material.

[jennifer-shehane]

I'll move this issue to the appropriate repo: https://github.com/cypress-io/cypress-realworld-testing

PRs are welcome to fix this.

[MikeMcC399]

The problem occurs when the browser width is between approximately:

1024px and 1092px

If the browser window is wider, then there is no overlap.
If the browser window is narrower, then the course progress is not shown (although it can be accessed through the three-dot burger menu)

[hadiimran00]

I'll move this issue to the appropriate repo: https://github.com/cypress-io/cypress-realworld-testing

PRs are welcome to fix this.

Can you assign this issue to me?

[salisshuaibu11]

I am experiencing the same issue

[MikeMcC399]

@hadiimran00

It seems that you fixed the issue in your fork in commit hadiimran00@db67bf8, however you didn't submit any PR to move the fix to the main repo.

Will you submit a PR?

@jennifer-shehane wrote

PRs are welcome to fix this.

so I assume that if you submit a PR then she would review it and merge it, if it solves the issue.

[salisshuaibu11]

@MikeMcC399 @hadiimran00 added !important value fixed it from my end along with the "min-width: auto"