cypress-realworld-testing icon indicating copy to clipboard operation
cypress-realworld-testing copied to clipboard

Published 20 hours ago • verified publisher icon cypress-io

UI Issue: Lesson Content Overlaps Sidebar on Learn Cypress

Open hadiimran00 opened this issue 1 year ago • 6 comments

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

  • [X] PC
  • [ ] Mac
  • [ ] iPhone
  • [ ] iPad
  • [ ] Android Phone
  • [ ] Android Tablet

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.

hadiimran00 avatar Dec 13 '23 09:12 hadiimran00

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

PRs are welcome to fix this.

jennifer-shehane avatar Dec 13 '23 15:12 jennifer-shehane

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)

MikeMcC399 avatar Dec 13 '23 15:12 MikeMcC399

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?

hadiimran00 avatar Dec 13 '23 23:12 hadiimran00

I am experiencing the same issue

salisshuaibu11 avatar Feb 08 '24 13:02 salisshuaibu11

@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.

MikeMcC399 avatar Feb 08 '24 14:02 MikeMcC399

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

salisshuaibu11 avatar Feb 08 '24 14:02 salisshuaibu11