scroller and arrow button overlap on academy page #232

Open
opened 2025-09-22 15:08:30 -04:00 by swap12875d · 0 comments

Description:

The scroller overlaps on expand and collapse arrows on curriculum section.

Current URL:

https://academy.topcoder.com/freeCodeCamp/responsive-web-design

Steps to reproduce:

  1. Open app and login with valid credential
  2. Navigate to Academy and select the given course, verify the URL https://academy.topcoder.com/freeCodeCamp/responsive-web-design
  3. Expand any of the course curriculum section
  4. Try to scroll the curriculum up and down
  5. observe the scroller gets overlapped partailly with the expand and collapse arrows of curriculum menu

Actual results:

The arrows and scroller overlaps on curriculum menu

Expected results:

There should be enough padding on the scroller and expand arrows, and should not overlap the elements.

Screenshots/Videos:

Monosnap Responsive Web Design - Topcoder Academy 2025-09-23 00-33-39.jpg

Overlapping scroller on 'Enrolled course' (https://academy.topcoder.com/freeCodeCamp/front-end-development-libraries)

Monosnap Front End Development Libraries - Topcoder Academy 2025-09-23 00-39-43.jpg

OS and Browser version:

Mac OS 15.5, Safari 18.5

VersionDetails:

Device:

MAC book

Reproducibility:

5/5

#### Description: The scroller overlaps on expand and collapse arrows on curriculum section. #### Current URL: https://academy.topcoder.com/freeCodeCamp/responsive-web-design #### Steps to reproduce: 1. Open app and login with valid credential 2. Navigate to Academy and select the given course, verify the URL https://academy.topcoder.com/freeCodeCamp/responsive-web-design 3. Expand any of the course curriculum section 4. Try to scroll the curriculum up and down 5. observe the scroller gets overlapped partailly with the expand and collapse arrows of curriculum menu #### Actual results: The arrows and scroller overlaps on curriculum menu #### Expected results: There should be enough padding on the scroller and expand arrows, and should not overlap the elements. #### Screenshots/Videos: ![Monosnap Responsive Web Design - Topcoder Academy 2025-09-23 00-33-39.jpg](/attachments/957bf382-fdcb-489b-99da-7d24f9246a55) #### Overlapping scroller on 'Enrolled course' (https://academy.topcoder.com/freeCodeCamp/front-end-development-libraries) ![Monosnap Front End Development Libraries - Topcoder Academy 2025-09-23 00-39-43.jpg](/attachments/93a378d6-bbc8-4aa7-87d7-f9e53f71a095) #### OS and Browser version: Mac OS 15.5, Safari 18.5 VersionDetails: <img src='/attachments/0a7aed65-15d6-43c1-9ba9-8e77abd96893' width='250' height='500'> #### Device: MAC book #### Reproducibility: 5/5
swap12875d added the UISafariMacOS labels 2025-09-22 15:08:30 -04:00
nithya160925 added the validS: Low labels 2025-09-24 15:57:18 -04:00
nithya160925 added the P: Topcoder Academy label 2025-09-25 01:03:49 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Topcoder-Platform/public-website-qa-bug-hunt#232