for me the problem is only the height. and my suggestion is it should be no more than 65% of the page.

the box contents can be scrolled for me?

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.

@Zache

@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.

.

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.

.

I have figured out the fix for this bug. However, I am not able to edit the css/javascript file directly from the browser. How do I effect this change? Please help with instructions on how to fix it.

I have figured out the fix for this bug. However, I am not able to edit the css/javascript file directly from the browser. How do I effect this change? Please help with instructions on how to fix it.

Hi, I updated the on-wiki development guide to include the case where one need to update CSS-files.

• https://commons.wikimedia.org/wiki/Help:Gadget-Cat-a-lot/Developing

Let me know if you need more help with this, and when you're able to update the pages, link it to the ticket and I will check it. After that, it can be submitted for testing, or if it is a very simple change to CSS, we can ask that interface admins update it to the global gadget.

Hi,

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:

• https://commons.wikimedia.org/wiki/User:Gvutong/cat-a-lot.css

I limited the box max-height to 65%, as recommended. Now the Cat-a-lot height does not overflow the browser height when reduced. I would appreciate feedback and testing. Kindly review.

In T388118#10648380, @Gvutong wrote:

I limited the box max-height to 65%, as recommended. Now the Cat-a-lot height does not overflow the browser height when reduced. I would appreciate feedback and testing. Kindly review.

Thank you! I tested and it seemed to work. Lets ask also @RoyZuo to test that it is working as expected.

@RoyZuo You can test the rule by adding max-height rule to your common.css file like this: (example)

#cat_a_lot {
    max-height: 65%;
}

@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

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

@Zache I have proposed an edit to on the page. Here's a screenshot. Please let me know if this is okay or if I need to edit it further. Thank you:

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#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.

Okay, thank you. Noted for future reference.

In T388118#10651114, @Zache wrote:

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.

FTR, I would’ve asked about this anyway if I hadn’t seen the discussion here in time. (It might make sense to ask an admin to revision delete the IP address of that edit.)

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 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.

Hi, @Zache I added a javascript function to the script to dynamically handle the change in height. It currently works on my browser, but I would need to have it tested and vetted.

• https://commons.wikimedia.org/wiki/User:Gvutong/cat-a-lot.js

Thank you, and Just FYI, I will test this ater today, but until evening I have other work to do. I just notified that I havent forgotten this.

@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#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.

@Zache: I tried implementing a workaround in the Javascript code to fix this, by modifying the CAL.showCategoryList(). The problem still persisted. I then decided to try editing the css again and now it works. The problem was a css issue more than a javascript one. Here is my implementation:

• https://commons.wikimedia.org/wiki/User:Gvutong/cat-a-lot.css

Key Changes Implemented

• Used flexbox for the cat_a_lot container, and set the flex direction to column
• Limited max-height to 65% of viewport height

• added a cat-a-lot-settings selector to control the minimize/close buttons

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#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

Here is a screen recording of it.

@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.

@Gvutong Hi, i tested it and it was quite promising. It is pure CSS solution if I looked correctly?

Initialization bug
Some notes, there was bug (tested with both Chrome an Safari) that when you go to the category, cat-a-lot is disabled on start-up then it will show up as partially open. (screenshot attached)

This can reproduced like this
1.) Open category Category:Universität Leipzig
2.) If cat-a-lot window is open by default then close it using X button in right-bottom UI
3.) Click reload-page

Say if you cannot reproduce it easily then i will debug it more

When page is very small
If the page is very small, then it also partially breaks. However, this is a corner-case bug, and doensn't need to be fixed. I just mentioned this because I noticed it, and this should be fixable by changing the HTML structure slightly using CSS.

Resizing
The official Cat-a-lot version supports moving and resizing the window, and hard-coding the max-height using CSS will break it and CSS max-height limits need to be removed using JavaScript in case of resize. (You need to test the official version to see how the resizing works. It is basically that one can resize it from the top, and a long click is a drag.)

Overall design notes
If the resizing problem can be solved, then it would be a good idea to start thinking about how to move the height calculations from showCategoryList() to CSS. It would require changing the HTML structure a little bit so that all of the below the categorylist would be in their own box which could be sized independently from the categorylist. With this also the position glitch fix could be removed from updateSelectionCounter().

Just some thoughs more. I would proceed like this:

1. I would disable javascript height resizing code from showCategoryList() and updateSelectionCounter() so that there would not be javascript code which would dynamically overwriting CSS values.
2. i would update the html structure so that it would be possible to do resizing using CSS like this:
   1. https://codepen.io/zache-fi/pen/OPJoWez

Basic idea would be that there is four boxes

• topbar (search box)
• long content box which overflows with scrollbar ( categories )
• short content box which height can differ but it is always visible (selection info, preferences button etc)
• button bar which is always visible (Cat-a-lot close and minimize/maximize buttons)

And when these are nicely grouped it is possible to size their height mostly with CSS.

@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?

Sure,

Basically you can remove all Cat-a-lot UI height related javascript code and most of width related. Here is example how I changed my version: User:Zache/cat-a-lot-T388118.js and diff to latest official version)

When there is no JavaScript code anymore for setting heights, you can use CSS to set them more freely.

• https://commons.wikimedia.org/wiki/User:Zache/cat-a-lot-T388118.css

I tested it so that I set the min-height for the #cat_a_lot_data (line 21). This is the container box for the open Cat-a-lot UI (i.e., searchbar, category list, and content below category list). Min-height is for ensuring enough space so that the elements don't overflow on top of each other or out of the screen.

Then I set the max-height for the` #cat_a_lot_category_list `(line 38), which limits the UI height so it doesn't grow over approximately 66% of the screen height. The limit is not exact as it doesn't limit the other elements, but it is close enough for our purposes.

The key difference with your implementation is that I removed the JavaScript code which was interfering with CSS rules, making everything much simpler.

Also note: Currently, my example doesn't have jQuery UI's resize and drag-move events enabled, so it needs to be re-enabled, but AFAIK it should be possible to enable it. Also, it would require a lot of testing with different browsers to see if there are bugs. There is at least one bug when the page loads and there are CSS errors (there is no "Cat-a-lot" link at the bottom of the screen, but a small "[ X _ ]" box which means that something didn't load correctly or in correct order).

I hope this helped you move forward.

@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:

• The height adjusts with the height of the screen. (bug fixed)
• Partial loading of cat-a-lot gadget when browser screen first loads or reloads.

OUTSTANDING
Currently, the only outstanding fix is the resizing of the box manually. I tried an implementation through javascipt earlier but it did not work. I will figure this out eventually, but for now, the css can be tested:
https://commons.wikimedia.org/wiki/User:Gvutong/cat-a-lot.css

In T388118#10686669, @Gvutong wrote:

Currently, the only outstanding fix is the resizing of the box manually.

An idea without looking into your code: have you considered the CSS resize property?

@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

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?

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?

Hi @RoyZuo
Is this a bug? I checked, and it auto-wraps on smaller screens but doesn't on larger screens.
eg:

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

Hi @Zache,

I had asked for the changes to be tested and, so far, no bugs have been discovered. Can I proceed with asking that the changes be integrated, or what would you suggest be the next course of action? Also, as a guide, what would you suggest is the best course for fixing the height resize issue?

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.

Thanks for the feedback, @Zache. I will prepare the cleaned-up version for merging.

The CSS rules in the $dataContainer were responsible for the partial opening of cat-a-lot on first load or reload, that you had mentioned earlier. The reason I moved it from CSS to JavaScript was that, since I only want the properties to be visible when the gadget is open, I couldn't control that from the css file.

Thank you for your answers.

Btw. if it is hard to see the changes with regular diff you can try wikEdDiff which uses different diff algorithms.

mw.loader.load( '//en.wikipedia.org/w/index.php?title=User:Cacycle/wikEdDiff.js&action=raw&ctype=text/javascript' );

One issue I noticed that manually resizing the box, when I reach the 65vh height, the resizing continues as a dragging (i.e. from that point on, if I move the top of the box 10px higher, the bottom also goes 10px higher). However, if I release it and start resizing back, it becomes a resizing again, and the bottom of the box remains halfway through the screen. It’s not critical, but if there’s an easy way to do this, I’d make it not do anything if the user continues (or starts) enlarging a 65vh box as the least astonishing way.

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.

Hi @Zache,

I have prepared a cleaned-up version ready for merging. I removed the whitespaces and commented-out codes and cherrypicked only relevant changes from my code to the default javascript code [[MediaWiki:Gadget-Cat-a-lot.js]]. Did final tests, and all seem to work out fine with regards to height (diff). How do I proceed with merging? I would love to know what the next steps are and if you have any other enquiry/recommendations. Thank you.

@Gvutong Thank you! I started to collect the finalized changes to User:Zache/cat-a-lot_status so that there is clear list for the changes. Then I will as if @Lucas Werkmeister (or somebody) would have time to check and merge them.

@Gvutong: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task, or do you need any help?

I can chime in in. It is merged as part of next version of cat-a-lot and we are just mergin rest of the changes to it too, make some testing how all changes work together and publish it.

• https://commons.wikimedia.org/wiki/User:Zache/Gadget-Cat-a-lot-20250602.js

I made some additional modifications for the code as we found some corner case bugs (diffs: cat-a-lot.js and cat-a-lot.css ).

Most important changes were:

• Removed remaining JavaScript height calculations so there are no 450px initial sizes anymore
• Made unified handler for minimizing and maximizing which is set only when window is created. This prevents it from being added multiple times, which causes hard-to-detect bugs.
• Removed 65% limit when user is resizing window manually. This also prevents resize action to change to move window when max-height has been reached.
• Changed category_list width to be handled via CSS instead of JavaScript