feat: Add smooth height resizing to Implementer Tools popup

[yugalkaushik]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

• My work conforms to the O3 Styleguide and design documentation.

If applicable

• My work includes tests or is validated by existing tests.
• I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR adds a smooth height resizing functionality to the DevTools popup component. Users can now resize the popup by dragging the top edge, with the minimum height constraint set to the default value (50vh).

Changes

• Added smooth height resizing capability with transition animations
• Created an improved resizer handle with better visual feedback on hover
• Implemented text selection prevention during resize operations
• Set minimum height constraint to maintain the original default height
• Utilized requestAnimationFrame for smoother resize performance
• Added appropriate cursor styling during resize operations
• Fixed SCSS variable usage to align with existing theme

Testing

• Verified that the popup can be resized by dragging the top edge
• Confirmed that the minimum height constraint works as expected
• Checked that text cannot be selected during resize operations
• Tested that the resize handle provides visual feedback on hover
• Ensured that the popup maintains its width during resizing

Screenshots

Before:

After:

Other

Next, I will work on resizing the internal components to ensure they adapt dynamically within the resized popup.

[yugalkaushik]

@denniskigen What do you think about it?

[MohamedAliMefteh]

hey @yugalkaushik , Thanks for your effort, I just have few suggestions.

[brandones]

Hi @yugalkaushik , thanks for this. Please implement the resizing of the internal parts of the popup. We can't merge this PR without that, since it would introduce buggy behavior. You can just add additional commits to this branch; no need to rebase or anything, since the commits will be squashed at merge time.

The E2E test failure looks unrelated to this branch, please ignore it for now. For some reason I can't see the re-run button, but we'll see what happens when you push your updates. If the problem persists we can look into it then.

As an aside, this is not required of you or anything, but if you can figure out an easy way to take short screencast videos, that would be a great way to demonstrate this feature. Even just a 10s video of you resizing the thing, scrolling the main window and the popup separately, clicking a thing or two. Like your screenshots, but animated.

[yugalkaushik]

implementer-tools.mp4

[yugalkaushik]

@brandones While working on this component, I realized that custom resizing can be a bit tricky and causes UI glitches. Therefore, I propose a better approach: using a two-state popup that can be toggled by a button.
Preview:

implementer-tools.new.mp4

[yugalkaushik]

Initiated resizing of internal parts of popup.

[brandones]

While smooth resizing would be slick, I think the "maximize" button is a fine approach. Thanks @yugalkaushik . A CSS transition to make it look smooth would be great, also.

[yugalkaushik]

Should I complete it or this feature is included in GSOC project.

[brandones]

I don't know of any GSOC project containing this feature, perhaps @jayasanka-sack can let us know if there is one. If you are available to complete this feature, it would be greatly appreciated!

[jayasanka-sack]

Hi @brandones, yes there's a GSoC project related to implementer tools: https://openmrs.atlassian.net/wiki/spaces/projects/pages/393248769/Improved+Implementer+Tools+GSoC+2025

That said, no worries at all; @yugalkaushik you’ve already done some awesome work here, and I’d definitely encourage you to keep going with it!