In T388118#10714906, @Zache wrote:

I tested it also with iPhone. It worked generally well. Only larger issue was that it tends to lost categorylist scrolling events (ie. it scrolls page, not the categorylist based on touch) When i click` select all / select none` / invert it will get focust back. No idea what to do about that.

However there is another issue which is easy to fix. The bottom row X (close) and _ could have little bit left and right padding.

What to do next

Prepare a cleaned-up version of the changes for merging. This means removing unnecessary whitespace adjustments and commented-out code or notes. In this case, I think the easiest approach is to start with a clean version from [[MediaWiki:Gadget-Cat-a-lot.js]] and manually cherry-pick the desired changes onto it.

Also if $dataContainer.css() rules (ie. line 1588) would work from CSS file too it would be good idea to move CSS-rules to there instead of defining them in javascript.

Otherways [[User:Gvutong/cat-a-lot.css]] is OK already.

In T388118#10714906, @Zache wrote:

I tested it also with iPhone. It worked generally well. Only larger issue was that it tends to lost categorylist scrolling events (ie. it scrolls page, not the categorylist based on touch) When i click` select all / select none` / invert it will get focust back. No idea what to do about that.

However there is another issue which is easy to fix. The bottom row X (close) and _ could have little bit left and right padding.

What to do next

Prepare a cleaned-up version of the changes for merging. This means removing unnecessary whitespace adjustments and commented-out code or notes. In this case, I think the easiest approach is to start with a clean version from [[MediaWiki:Gadget-Cat-a-lot.js]] and manually cherry-pick the desired changes onto it.

Also if $dataContainer.css() rules (ie. line 1588) would work from CSS file too it would be good idea to move CSS-rules to there instead of defining them in javascript.

Otherways [[User:Gvutong/cat-a-lot.css]] is OK already.

In T388118#10692976, @Zache wrote:

@Gvutong: Hi, I tested it now and it worked very well. There were no bugs in resizing or moving (it opened and closed nicely after moving and resizing). It also resized itself nicely when the page was resized.

Also note, in the current official version, the UI window can only be resized by user in Y-axis direction (height) and the X-axis direction (width) is fixed to content width. So this is not from your changes, but it was already there.

The only clear visible bugs that I saw were that when the user made a category search, it would reset its position and size to the right side of the screen. I did not check what does this. Another minor visual bug is that in the Category search input box, the left-side padding is too small, and the first character is partially hidden.

Next thing to do
1.) Ask other people to test it too so we know that there is no something what we didn't catch.
2.) It should be tested if this fixed the mobile height problem detected in T389723

In T388118#10711509, @RoyZuo wrote:

i noticed that, for super long titles, cat-a-lot would auto wrap

e.g. https://commons.wikimedia.org/wiki/Category:Oranienplatz_(Berlin-Kreuzberg) has such a subcat.

so resticting its width should probably make it auto wrap overly long titles?

I will be working on the hausa translation. I see that there is currently no hausa translation for the gadget.

@Zache I have fixed the bug that causes it to appear partially. I also disabled the Javascript code in showCategoryList() that handles the height: diff.
The current implementation of the css addresses these issues:

@Zache I have seen the bug that causes the gadget to open partially on first load. It turns out that, while trying to solve the height issue, I had inadvertently introduced a new bug. I have isolated the part of my css code responsible for the bug, and I am currently working to fix it. Once that is complete, I can then implement other recommendations you have made. However, I would appreciate your help in understanding how to move the height calculations from showCategoryList() to CSS. What would be the best way to solve this?

@Zache here is the diff showing the changes I have made to the css to correct this bug. If this okay, I would like to go ahead and propose a talk so it can be added for general testing.

In T388118#10674758, @RoyZuo wrote:

here is a good candidate for testing. contains a category with long title and a lot of subcats, so the cat a lot box becomes both wide and tall.

https://commons.wikimedia.org/wiki/Category:Universit%C3%A4t_Leipzig

In T388118#10664975, @Zache wrote:

@Gvutong: It's was still quite easy to break the layout.

One issue with your implementation is that multiple places in the code now calculate sizes independently, causing conflicting results and ultimately making content overflow the container. The easiest way to reproduce the problem is to shrink the Cat-a-lot window, then minimize and maximize it—after which the content will overflow.

I suggest modifying the existing size calculations in CAL.showCategoryList(). Specifically, first calculate the max-height container size, then fit the category list to it. This way, only one place manages window height calculations. Additionally, ensure you check if markCounter is visible, and if it is, include its height in calculations.

I made one implementation for this here:

• https://commons.wikimedia.org/w/index.php?title=User%3AZache%2Fcat-a-lot-T388118.js&diff=1012477565&oldid=1012474222

Note: My code lso doesn't handle window resizing dynamically, causing problems when the window is resized to a smaller size and the Cat-a-lot window is minimized and then maximized. The result for this is that Cat-a-lot's bottom-row control buttons overflow outside the window. To fix this, the size of resultList should be recalculated dynamically if window-height is smaller than expected.

In T388118#10654268, @Zache wrote:

As Lucas noted, there is dynamic calculation for the window sizes and CSS max-height will break the calculations. Result is that the bottom of window will go outside of the screen (ie. minimize , close Cat-a-lot buttons at the bottom row). It maybe needs to be handled with javascript instead of CSS.

As reference this is how window looks like without 0.65% max-height CSS rule.

In T388248#10656275, @Rubylena wrote:

Hi everyone, I hope your contribution is going fine. If you face any issues while completing the task, don't fail to reach out.

In T388118#10651114, @Zache wrote:

In T388118#10650973, @Gvutong wrote:

It is good.

However, the signing of the comment should be done so that name matches to the login credidentials. (ie. you werent logged in so the name didnt match to the sign (diff)).

Based on social code in Commons, the process would have been to either login before saving the edit OR, if one had been signed the comment when not logged in and there is an IP address in the signature, then to login and edit the signature (and write in the comment line why the signature was edited).

If the case had been that you were making a more complex JavaScript change, then most likely somebody would have asked why your signature and login name didn't match. In this case reguested edit is very simple CSS change this doesn't matter in this context.

In T388118#10650918, @Zache wrote:

@Gvutong : If you like you could propose the change in Mediawiki:Cat-a-lot.js talk page. Existing discussion is under title Wide popup due to long cat names and proposing would be just starting subtopic in same section with proposal.

I would write something like this as proposal

Edit request: Add max-height rule to Mediawiki:Gadget-Cat-a-lot.css
{{Edit request}}
would like to propose adding following CSS rule to Mediawiki:Gadget-Cat-a-lot.css to fix the phab: T388118. Example diff for the change.

#cat_a_lot {
max-height: 65%;
}
--Zache (talk) 09:50, 19 March 2025 (UTC)

Same as in wikicode

=== Edit request: Add max-height rule to Mediawiki:Gadget-Cat-a-lot.css ===
{{Edit request}} <!-- This will flag the discussion so that the interface admins will see it -->
I would like to propose adding following CSS rule to [[Mediawiki:Gadget-Cat-a-lot.css]] to fix the [[phab: T388118]].  Example [https://commons.wikimedia.org/w/index.php?title=User%3AGvutong%2Fcat-a-lot.css&diff=1011186999&oldid=1011178434 diff] for the change.

 #cat_a_lot {  
   max-height: 65%; 
 }

--~~~~ <!-- user talk page signature in wikicode -->

There is older change proposals in the talk pagee as example

• https://commons.wikimedia.org/wiki/MediaWiki_talk:Gadget-Cat-a-lot.js#Tag_to_filter_recent_changes_in_Wikipedia
• https://commons.wikimedia.org/wiki/MediaWiki_talk:Gadget-Cat-a-lot.js#Edit_request:_Update_Cat-a-lot_to_Mediasearch_version

Hey Everyone,

I have fixed the issue of the Cat-a-lot height overflow. It was a minor CSS change. I have linked the css file here:

In T388118#10645418, @Zache wrote:

@Gvutong Yes, modifying JavaScript/CSS directly is the way to go. Just a comment regarding suitable height: After I created this ticket, I learned that there is a gadget called ACDC which uses Cat-a-lot selections.

ACDC can be enabled from Wikimedia Commons by selecting it from Settings -> gadgets tab -> Interface: Structured Data -> Add to Commons / Descriptive Claims (ACDC): Add a collection of structured data statements to a set of files

In the new Vector2022 skin, ACDC is enabled from the right side tools menu (see screenshot), so there needs to be some space so users access access this menu when Cat-a-lot UI is open. Therefore, a maximum of 65% of window height is a good height, as RoyZuo presented.

.

Hi All,

Hi Everyone,

I have been able to reproduce the bug. However, I would like to ask a question on fixing it. Do I just edit the css/js code directly or is there another way to fix it? I currently cannot find information on contributing to/fixing the bug. Would appreciate all the help I can get. Thanks.