fix: breadcrumb navigation css

[navinkarkera]

The breadcrumb navigation popup was hidden due to css property overflow: hidden in parent li element. This is a tricky issue in css where we want the parent to have overflow:hidden normally (to hide content overflowing the container) but show popups from its children element.

It was working normally in nutmeg version as the parent element of popup (which has position: absolute) did not have position: relative, causing the popup to be displayed in the top left of the breadcrumb parent div like so:

This was fixed in palm by this commit but it now positioned the popup inside list element which has overflow:hidden property.

We are overriding the overflow property on focus to retain both behaviour.

Test instructions:

• Setup latest tutor (palm) locally
• Checkout this PR/branch.
• Mount frontend-app-learning using tutor config save --append MOUNTS=/path/to/frontend-app-learning
• Run tutor dev launch
• Visit any course and use the breadcrumb navigation buttons. Note: You need to login using staff/admin user as breadcrumbs with navigation feature is only visible to staff users.

[Agrendalath]

👍

• I tested this: tested the course navigation
• I read through the code
• I checked for accessibility issues: n/a
• Includes documentation: n/a
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

[0x29a]

@navinkarkera, do we need to upstream this PR? Also, what ticket it relates to (if any)?

Edit: nevermind, I see the note in the code drift project.

[Cup0fCoffee]

@navinkarkera @Agrendalath I'm assuming this PR is not needed in Redwood or Sumac, so going to remove it from the code drift dashboard, but if it's needed, please let me know.