Hi @Zache , for this issue I was planning to make the cat-a-lot dialog box go full-screen for better user experience for the end user just like a pop-up window as it already is only that we can cover the whole screen by the pop-up till the user is utilizing it's functionalities after which he can just exit it by clicking on the cross button that we normally do. I thought of this while trying to solve this only and felt that minimizing the dialog box with the screen size won't be a good idea so we can try this instead.
What do you think of this idea, let me know I'll be happy to make changes as per your suggestions.
Thank you!

@Nidhicodes I understand your reasoning for making the Cat-a-lot dialog full-screen, but in my opinion, I don’t think it’s necessary. The dialog usually contains limited information, and making it full-screen might just create a lot of empty space without adding much value to the user experience. Keeping it compact might work better for the tool’s purpose.

Hey @Shellygarg10 thank you so much for taking time to respond and review, I actually tested making the widget full screen and it felt better in terms of the user experience and no such extra white space because in mobile phones when we'll have a small dialog box or even if the size it's currently at it might get a bit tedious in terms of touching and selecting any particular feature so to tackle that we might need to find a solution by either keeping it full screen for ease or some different approach like a drop down or any other creative UI for enabling the users on mobile phones too to have a seamless experience just like is already for desktop users. Would love to take the perspective of @Zache too on this. Thanks again!

@Nidhicodes I think your suggestion ends up affecting the desktop layout too, which we might want to avoid. I tried setting the width to auto, and that seems to work well without breaking the UI.
Here’s the diff with the changes I made: https://commons.wikimedia.org/w/index.php?title=User%3AShellygarg10%2FGadget-Cat-a-lot.js&diff=1017280522&oldid=1017280122

@Zache would love your feedback on this fix.

This is not a perfect solution, but if we want to keep the current look then we can just remove width and height rules and let jQuery UI decide what's suitable. The result is that the dialog is in an incorrect position if we dynamically change the content. I.e., the top-left corner stays the same when the dialog width / height changes, so it is not centered anymore and it can overflow from the window.

However, we can prevent this by asking jQuery to reposition the dialog:

this.progressDialog.dialog("widget").position({ my: "center", at: "center", of: window });

Here is diff to my changes

@Nidhicodes,About making it fullscreen. I think that I would need to see the code to decide if it is a good idea or not, as it is not only about which is best in the usability sense. Currently Cat-a-lot is heavily using jQuery UI, which is deprecated in the MediaWiki ecosystem in favor of transitioning to Codex (see T389737).

So I would keep current changes simple and make larger design changes when the UI is updated to Codex.

Hi @Zache, thank you so much for the detailed feedback and the suggestion!

You're absolutely right—it's best to avoid major layout changes like fullscreen mode for now, especially considering the dependency on jQuery UI and the planned transition to Codex (T389737). I completely agree that we should keep things simple until the UI migration happens.

Following your suggestion, I updated the patch by removing the fixed width/height and adding the position() method you recommended to ensure the dialog remains centered when the content size changes dynamically:

this.progressDialog.dialog("widget").position({ my: "center", at: "center", of: window });

This solution works well in keeping the interface consistent and avoiding the overflow issue. Let me know if there's anything else you'd like me to tweak or if further testing is needed.

Really appreciate your guidance—thank you again for helping me navigate this!

@Nidhicodes I moved this in merge requests  page as ready for merge. However, I linked to my earlier change as i didn't find your diff. If you have good patch somewhere I can update the link to that.

Hi @Zache this is my latest diff with these changes you can find them here diff . Thank you!