search

cypress-io / cypress-realworld-testing

Next.js project for learn.cypress.io
https://learn.cypress.io
MIT License
77 stars 63 forks source link

UI Issue: Lesson Content Overlaps Sidebar on Learn Cypress #326

Open hadiimran00 opened 10 months ago

hadiimran00 commented 10 months ago

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

Additional Information

Screenshot:

1

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 commented 10 months ago

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

PRs are welcome to fix this.

MikeMcC399 commented 10 months ago

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 commented 10 months ago

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 commented 8 months ago

I am experiencing the same issue

MikeMcC399 commented 8 months ago

@hadiimran00

It seems that you fixed the issue in your fork in commit https://github.com/hadiimran00/cypress-realworld-testing/commit/db67bf83993631fe769bb2ae7f2f065ed3689ae1, 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 commented 8 months ago

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