[Remove Vuetify from Studio] Buttons in Move modal #5355

[Prashant-thakur77]

Fixes #5355

Summary

Updated Buttons from Vbtn to KButton in Move modal
Used KButtonGroup for the bottom right Buttons for 8px spacing.

IMAGES

References

• Parent issue: #5060

Reviewer guidance

Login as a@a.com with password a
Go to Channels > Published Channel
Check topic or resource
Click "Move" icon

[MisRob]

Thank you @Prashant-thakur77, code changes make sense and I confirm button interactions still work as expected.

I noticed one problem on smaller screens, where "Add new folder" button label is cut off:

This will likely be caused by the surrounding context rather than button itself, nevertheless it's a regression compared to the previous experience so it will need to be fixed before we merge. Can you investigate what's the cause?

[Prashant-thakur77]

Hello @MisRob,

I looked into the button truncation issue and found two key reasons:
Reference for Kbutton properties https://github.com/learningequality/kolibri-design-system/blob/develop/lib/buttons-and-links/buttons.scss

1. Flex Property Differences:
   =>VBtn has ( flex: 0 0 auto )with flex-shrink: 0 which prevents shrinking
   =>KButton has no explicit flex properties, defaulting to flex-shrink: 1 (aggressive shrinking)

2. Breadcrumbs Constraint:
   The Breadcrumbs component uses max-width: calc(100% - 86px) which leaves only 86px for the button. Combined with KButton's max-width: 100%, this causes truncation.

Solution:
The solution is just to add a class to the Kbutton and assign flex-shrink=0 to it.

This is after using the solution mentioned above.

[MisRob]

Perfect @Prashant-thakur77, please proceed. Thanks for clarity around what's going on.

[Prashant-thakur77]

Hello @MisRob,

I've submitted the PR for the MoveModal button truncation fix.Please let me know if there's anything else I can contribute to!
Thanks for your guidance! 💫.

[MisRob]

Thank you @Prashant-thakur77.

All looks well - haven't observed any regressions in functionality, breadcrumbs, or buttons.

Please let me know if there's anything else I can contribute to!

We're happy to have you contribute to this project - I'm opening new issues regularly - find them in the usual way via the link in the contributing guidelines. Thanks a lot.