Hey @Tacsipacsi,
Thank you for the guidance! I've implemented the improvements exactly as you suggested. The functionality remains the same.
Javascript Changes :
https://commons.wikimedia.org/w/index.php?title=User%3AShellygarg10%2FGadget-Cat-a-lot.js&diff=1019306175&oldid=1019300452
CSS Changes :
https://commons.wikimedia.org/w/index.php?title=User%3AShellygarg10%2FGadget-Cat-a-lot.css&diff=1015871084&oldid=1015848029 ( no updates here this time )

@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

@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 @Zache, I've added a search button to improve mobile usability.

Thanks for the update @Zache! I appreciate you balancing the tasks between us. I’ll be happy to contribute to both alongside @Nidhicodes

Hey @Zache
I have documented my findings in detail, highlighting the issues, potential improvements, and suggestions for enhancing mobile usability.
Here's the link to report with image and findings
This review should help in making the interface more mobile-friendly. Let me know if any additional feedback or clarification is required!

In T389718#10685540, @Shellygarg10 wrote:

In T389718#10684318, @Zache wrote:

@Shellygarg10 Thank you, I was able to repeat it.

@Shellygarg10, @Spykelionel, @Nidhicodes, @Neyehh & all. Does the following CSS rule fix the problem in all cases? The rule's scope would be the cat_a_lot box without overriding the global noprint rule using the !important declaration.

@media print{
    #cat_a_lot.noprint {
        display: none !important;
    }
}

@Zache , this css rule does fix the probelm and as suggested i have changed the css code to not override the global noprint rule.
the updated and final changes are
JS code : https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-Cat-a-lot.js&diff=1013254771&oldid=0 - added noprint class (no change here)
CSS code : https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-Cat-a-lot.css&diff=1014443191&oldid=1013219011 - updated scope in media print

In T389718#10684318, @Zache wrote:

@Shellygarg10 Thank you, I was able to repeat it.

@Shellygarg10, @Spykelionel, @Nidhicodes, @Neyehh & all. Does the following CSS rule fix the problem in all cases? The rule's scope would be the cat_a_lot box without overriding the global noprint rule using the !important declaration.

@media print{
    #cat_a_lot.noprint {
        display: none !important;
    }
}

@Nidhicodes I am not sure exactly what problem you are facing for chrome browser because I tested it on chrome initially and then tested for Firefox. It worked perfectly for me in both browsers.

In T389718#10680574, @Zache wrote:

@Shellygarg10 I think that the adding noprint with javascript is solid answer for preventing it showing up in print.

However is the CSS definition required (ie diff), i think that there should be already system wide CSS definition for noprint so i am just confirming if you tested that if it was not enough?

Hey @Zache,
I’ve updated and added the user setup steps documentation as a comment above. I reformatted the steps into clearly numbered sections for easier navigation and added expected outcomes after each major step to help verify progress. I’ve also verified that Cat-a-lot works correctly from my user space and is ready for further development. Let me know if anything else is required.

Cat-a-lot Setup: First Task

As part of contributing to the Cat-a-lot JavaScript gadget development for Wikimedia Commons, the first task is to copy the Cat-a-lot script files to your own user space.
This ensures that you can safely experiment and make modifications without affecting the live version of the gadget.

Thanks, @Zache!
Defining api.config.simulationMode in Mediawiki:Gadget-libAPI.js makes a lot of sense because it centralizes the configuration, making it easier to manage in both files and toggle Simulation Mode without modifying multiple parts of the code.
I’ll proceed with this approach and keep you posted on the progress.

Hey @Zache,
I was trying to approach this task, and here’s my understanding and the approach I’m thinking of:

@Zache ,
I tried different approaches to fix the issue where the Cat-a-lot box appears while printing:

Hello @Zache,
Thanks for the documentation! It was really helpful.
However, I encountered an issue that took me a while to debug. The link provided for adding the script to

Special:Mypage/common.js

Hey @Zache,
I was able to recreate the problem where the Cat-a-lot box appears during print previews on category and content pages in Wikimedia Commons. The box shows up on the printed page, which matches the original issue description.
I’m working on a fix by adding the noprint class to the relevant elements or using CSS with @media print to ensure that the Cat-a-lot box is hidden properly during printing.