Overlapping icons on month and year selection in calendar (custom date range filter) #54

New Issue

swap12875d · 2025-09-22T00:56:09-04:00

swap12875d commented

2025-09-22 00:56:09 -04:00

Description:

Overlapping icons are displayed on the month and year selection dropdowns in the calendar widget, which appears when selecting a custom date range on the Challenges page filter. This makes it difficult to clearly see or select the month and year, impacting the usability of the date filter.

Current URL:

https://www.topcoder.com/challenges

Steps to reproduce:

Navigate to the Challenges page at https://www.topcoder.com/challenges
Select the "Custom Date Range" option.
Click on the calendar icon to open the calendar picker.
Observe the month and year selection dropdowns at the top of the calendar.

Actual results:

The icons for month and year selection are overlapping each other.
The overlapping causes difficulty in distinguishing the icons and selecting the appropriate month or year.
Visual clutter negatively impacts user experience with the date filter.

Expected results:

The month and year selection icons should be clearly visible, spaced properly without any overlap.
Users should be able to easily identify and select the correct month and year.
The calendar widget UI should be clean, accessible, and user-friendly.

Screenshots/Videos:

OS and Browser version:

Windows 11, Chrome 140.0.7339.186

VersionDetails:

Device:

Windows Laptop

Reproducibility:

5/5 (reproducible every time)

#### Description: Overlapping icons are displayed on the month and year selection dropdowns in the calendar widget, which appears when selecting a custom date range on the Challenges page filter. This makes it difficult to clearly see or select the month and year, impacting the usability of the date filter. #### Current URL: https://www.topcoder.com/challenges #### Steps to reproduce: 1. Navigate to the Challenges page at https://www.topcoder.com/challenges 2. Select the "Custom Date Range" option. 4. Click on the calendar icon to open the calendar picker. 5. Observe the month and year selection dropdowns at the top of the calendar. #### Actual results: - The icons for month and year selection are overlapping each other. - The overlapping causes difficulty in distinguishing the icons and selecting the appropriate month or year. - Visual clutter negatively impacts user experience with the date filter. #### Expected results: - The month and year selection icons should be clearly visible, spaced properly without any overlap. - Users should be able to easily identify and select the correct month and year. - The calendar widget UI should be clean, accessible, and user-friendly. #### Screenshots/Videos: ![image.png](/attachments/78631e8a-0ce8-41d9-805a-865fcf425d8a) #### OS and Browser version: Windows 11, Chrome 140.0.7339.186 VersionDetails: <img src='/attachments/1f354afb-af2d-44dc-8c03-73de2f71fa79' width='600' height='375' alt='Windows_chrome_version_screenshot'> #### Device: Windows Laptop #### Reproducibility: 5/5 (reproducible every time)

image.png

300 KiB

swap12875d added the UX UI Windows Chrome labels 2025-09-22 00:56:09 -04:00

nithya160925 added the Not a bug label 2025-09-24 04:56:13 -04:00

nithya160925 closed this issue

2025-09-24 04:56:28 -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#54