[TC_LEARNER_REDWOOD_8][UI/UX ISSUE] Unexpected screen behavior at higher browser zoom levels when the left navigation bar or right notification panel is open.

[BushraFarooq28]

Summary

• Unexpected screen behavior occurs at higher browser zoom levels when both the left navigation bar and right notification panel are used.

Description

• At 100% browser zoom, when a user opens the left navigation menu and then clicks the notification icon, the right-side notification panel opens and the left navigation menu automatically collapses — this is expected behavior.
• However, when the browser zoom is increased to 110% or higher, the behavior changes. If the user opens the left navigation menu and then the notification panel, the panel opens in full view, pushing course content out of view. When the notification panel is closed, the left navigation menu expands to full width, again hiding the course content. Only after manually closing the left navigation menu can the user view the course content again.
• At higher zoom levels, the user is unable to view the course content alongside either the left navigation or the right notification panel. Only one of these elements is visible at a time — either the notification panel, the navigation menu, or the course content

Steps to Reproduce

• Log in to Open edX and start or resume any course.
• On the course screen, you will see:
  • The left-side course navigation menu,
  • The course content in the center/right,
  • A notification icon on the top-left (header area).
• Ensure the browser zoom is set to 100%. At this zoom level:
  • The left navigation menu is expanded.
  • The course content is fully visible.
• Click the notification icon.
• The notification panel opens on the right side, and the left navigation menu collapses automatically.
• The user now sees the course content on the left and the notification panel on the right, with a menu icon on the top-left.
• Increase the browser zoom to 110% or higher.
• At higher zoom:
  • The notification panel takes over the full view.
  • The course content and the menu icon disappear.
• Close the notification panel.
• The left navigation menu now expands in full-screen view, hiding the course content.
• Only after manually closing the left navigation menu does the course content become visible again.
• At higher zoom levels, clicking either the notification panel or the navigation menu causes them to open in full screen, hiding all other content.

Expected Results

• On higer zoom it should be responsive and behavior in the same manner as it behave in lower zoom %

Actual Results

• At higher zoom levels, clicking either the notification panel or the navigation menu causes them to open in full screen, hiding all other content.

Details

• Browsers
  • chrome - Version 135.0.7049.115 (Official Build) (64-bit)
  • Firefox - Version 138.0.1 (64-bit)
• Device specifications
  • Lenovo ThinkPad T14s Gen 2i
  • Model Number: 20WNS1GC0B
  • Display resolution [1920x1080]

open.edx.issue.webm