Overflowfix

[AllanOXDi]

Summary

Fixes the navigation menu to overflow correctly. There was also another unnecessary scrollbar that could hide the BottomAppBar buttons on smaller screens on the facility plugin, it is also fixed by this PR.
Closes #11423

Before

Screen.Recording.2024-01-12.at.22.58.24.mov

Button being hidden

Screen.Recording.2024-01-15.at.17.37.58.mov

After the fix

Screen.Recording.2024-01-18.at.23.41.21.mov

References

#11423

Reviewer guidance

• Test if the navlinks are still getting hidden on the device plugins with different screen sizes.
• Test whether scroll bar is still appearing on the BottomAppBar on the facility plugin
• And from the code perspective, does it make sense?

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b11.dev0_git.20.gd75c03b0.pex
Windows Installer (EXE)	kolibri-0.16.0b11.dev0+git.20.gd75c03b0-unsigned.exe
Debian Package	kolibri_0.16.0b11.dev0+git.20.gd75c03b0-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b11.dev0+git.20.gd75c03b0-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b11.dev0+git.20.gd75c03b0-0.1.0-debug.apk
TAR file	kolibri-0.16.0b11.dev0+git.20.gd75c03b0.tar.gz
WHL file	kolibri-0.16.0b11.dev0+git.20.gd75c03b0-py2.py3-none-any.whl

[rtibbles]

I was still able to get into a state where the navigation overflow menu did not appear - it seemed to be because while the navLinkTop was higher than the containerBottom, it still did not fit in the container.

I was able to fix it locally by accounting for the height of the nav bar link as well. I updated the filter function body to this:

              const navLink = this.$refs.navLinks[index].$el;
              const navLinkTop = navLink.offsetTop;
              const navLinkHeight = navLink.clientHeight;

              const containerTop = this.$refs.navContainer.offsetTop;
              const containerBottom = containerTop + this.$refs.navContainer.clientHeight;
              return navLinkTop + navLinkHeight >= containerBottom;

And didn't see any more issues.

[rtibbles]

We chatted about this on slack, but just making a note here, that there appears to be a specific interaction between an 'active' nav link being in the dropdown menu, and the drop down menu not appearing at all.

[rtibbles]

Have broken out the remaining issue into a follow up issue: #11776

[rtibbles]

Docs build is fixed on the release branch. Merging.