Fix css override troubles#5356
Conversation
bjester
left a comment
There was a problem hiding this comment.
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
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
appearanceOverrideshas been added to theKTooltipcomponent so its appearance can be better manipulated, particularly thez-indexin 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