search

nusmodifications / nusmods

🏫 Official course planning platform for National University of Singapore.
https://nusmods.com
MIT License
562 stars 271 forks source link

Planner ModuleMenu overlaps with the next menu's icon #3739

Closed leslieyip02 closed 5 days ago

leslieyip02 commented 1 week ago

Describe the bug

The planner's ModuleMenu overlaps with the dropdown caret icon of the next module.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Planner
  2. Select 2 mods (the first mod needs to be a one-liner, if not the menu will not overlap with the next mod)
  3. See error

Expected behavior

Menus should not overlap.

Screenshots

Screenshot 2024-07-05 202400

Screenshot 2024-07-05 202711

Desktop

iZUMi-kyouka commented 1 week ago

The issue seems to be in website\src\views\planner\PlannerModule.scss

With the z-index: 1; and position: relative; in the .menuBtn, a new stacking context is created which includes the menu popup, since the actual popup is inside the button, so setting z-index of 910 in .dropdown-menu in caret.scss (which I couldn't find in the forked repo) won't cause it to be in front of the next menu button causing overlap (cmiiw).

image

Removing z-index: 1 from .menuBtn in PlannerModule.scss seems to fix the issue.

image z-index is removed

image image menu no longer overlaps with the next button in this specific case