-
Notifications
You must be signed in to change notification settings - Fork 224
Fix css override troubles #5356
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix css override troubles #5356
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are other tooltips that had the same issues within the modals to begin with, so this only targets a subset-- the recommendation cards. So I feel this PR perpetuates the problematic z-indices and doesn't fully resolve some of the problems either.
The first contributing issue is that the trash and move modals have embedded modals, which is a bad practice to begin with. Moving the those outside helps a little and prepares us better for the Vuetify migration. After solving the former, a solution is to simply have those components toggle between the two modals instead of keeping both open at the same time. Having these modals in the routing could also be a solution, but either way, the solutions handle the modal deficiencies that should be resolved regardless.
@bjester, the latest commit should resolve the issue—thanks for the recommendations. Flattening the embedded modals restored button clickability, but the |
29dfd4f
to
dfa4d79
Compare
…tes them to use KModal
dfa4d79
to
e83ef5d
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The nested modals and dialogs are working as expected. The changes seem completely reasonable to me. LGTM! Thanks for handling these regressions @akolson
Summary
This pr fixes unresponsiveness of the trash page Restore button and Add New Folder button in the move resource page caused by the css overriding done when fixing #5322. To fix the issue, a new prop
appearanceOverrides
has been added to theKTooltip
component so its appearance can be better manipulated, particularly thez-index
in this case.Note: Testing this pr is dependent on merging and releasing learningequality/kolibri-design-system#1112
Before:
Restore button
restore.mp4
Add New Folder button
new.folder.mp4
After:
The tooltips still work as before
Screen.Recording.2025-09-03.at.18.38.35.mov
Restore button
Screen.Recording.2025-09-03.at.18.44.29.mov
Add New Folder button
Screen.Recording.2025-09-03.at.18.46.27.mov
Note:
Please note that this a11y contrast issue has been fixed as part of this pr.
References
Fixes #5350
Fixes #5349
Reviewer guidance