Removing the 40px padding in the HTMLRender component and adjusting the HTMLRenderNavigation logic to reposition the pill and highlight borders when the selected element is too close to the edge of the screen. Whenever the top of the target element (selected or highlighted) is less than the calculated height of the pill the pill is relocated to appear inside the highlight region. Also, normally the selected border is positioned to be outside of the selected element but this change moves the selected border to the inside if the target element is exactly adjacent to the edge of the screen. Finally, the CSS class names in the HTMLRenderNavigation component have been updated to match the style guidelines.
🎫 Issues
Closes #71
👩💻 Reviewer Notes
✅ Checklist
General
[ ] I have added tests for my changes.
[x] I have tested my changes.
[ ] I have updated the project documentation to reflect my changes.
Pull Request
📖 Description
Removing the 40px padding in the HTMLRender component and adjusting the HTMLRenderNavigation logic to reposition the pill and highlight borders when the selected element is too close to the edge of the screen. Whenever the top of the target element (selected or highlighted) is less than the calculated height of the pill the pill is relocated to appear inside the highlight region. Also, normally the selected border is positioned to be outside of the selected element but this change moves the selected border to the inside if the target element is exactly adjacent to the edge of the screen. Finally, the CSS class names in the HTMLRenderNavigation component have been updated to match the style guidelines.
🎫 Issues
Closes #71
👩💻 Reviewer Notes
✅ Checklist
General
⏭ Next Steps