openedx / frontend-app-authoring

Front-end for the Open edX Studio experience, implemented in React and Paragon.
GNU Affero General Public License v3.0
14 stars 75 forks source link

Course outline page: Weird alignment happening on the highlights feature #986

Open jmakowski1123 opened 6 months ago

jmakowski1123 commented 6 months ago

When I add highlights to a section in the course outline, the field for the fifth highlight and the save/cancel buttons spill off the modal

Screen Shot 2024-05-07 at 12 22 51 PM
mariajgrimaldi commented 5 months ago

FYI @arbrandes @brian-smith-tcril @openedx/teaching-and-learning, please tag anyone who can help with this issue.

KristinAoki commented 4 months ago

@brian-smith-tcril I looked at this issue and it appears to be a paragon issues. I was able to reproduce the issue on the doc site when I made it so that the content in ModalDialog.Body overflowed.

brian-smith-tcril commented 4 months ago

Ah, yes. Overflow in the modals isn't being handled in the most elegant way at the moment. The issue with the autosuggest component not overflowing was resolved by a PR - but there were conversations around developing a more robust solution that made it into another Paragon issue.

It's clear that the content overflowing out of the modal without a background isn't expected behavior. If having a scrollbar in the modal is an acceptable solution then setting isOverflowVisible={false} should do the trick, but in general default values shouldn't lead to unexpected behavior like this. I've created an issue on the Paragon repo to discuss how to best handle this prop without leading to the aforementioned unexpected behavior.

mariajgrimaldi commented 2 months ago

Thank you for the update, @brian-smith-tcril. Since you're working on a solution, I'll assign you this issue for now. Thanks!