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

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

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!

@theprotonade @SGill I have set up the codebase locally and completed the microtasks and after getting familiar with the code I understood the problem better and how we can plan on tackling this so I wanted to share my insights and discuss if what I am thinking is the right way to approach this.

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!

Demo link
Please check out this video for the demo of the implemented changes @Zache .
Thank you!

I have added the above two functions in the existing codebase. The updated makeClickable() function ensures that file selection works consistently on both desktop and mobile.

This issue is not just for the mobile view but also for the desktop view I'll try to fix it too after looking into the above task and share updates.

Also @Zache , one more issue I just noticed upon opening an image in a by not going through the link and just clicking on it to view it's zoomed up version Cat-a-lot widget hides the small button to go back to the license of the image, I will try to tackle this as well and keep you posted. Thank you!

Sure @Zache , will keep you updated on the assigned task, thank you!

@Zache yes it does solve the issue. But for me it was not functional for chrome browsers but worked fine for others so I added onbeforeprint and onafterprint functions explicitly like I mentioned above.

Here's my push for the above issue, please check
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikisource/+/1131670

I have pushed the changes and requested for review here @dom_walden
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikisource/+/1131461

I tested the Cat-a-lot gadget on Wikimedia Commons using the Minerva skin (mobile view), and here are my findings:

Hi @Zache
I’ve completed the translation updates for Cat-a-lot. While working on other tasks, I took a short break to focus on this, which helped me regain momentum.

I have completed the issue related to hiding #cat_a_lot during printing. Initially, we used a CSS-based media query approach (@media print {}), which worked for most browsers except Chrome.

Hi @Zache thank you so much for the wonderful guide and documentation using which I have completed the first task, setup my development environment and looking forward to exploring the next tasks and contributions I can make to Cat-a-lot. Thank you!

Hi @Samwilson , I am very excited to be a part of the community and looking forward to contribute to the best of my abilities. I would like to begin by going ahead with this task. Can you please assign it to
me?