Add a maximum height to lists (Firefox)

[ClarkAllen1556]

Currently (on Firefox not sure about Chrome) if there are lists with lots of cards in them they will continue to grow and not transition to a scroll behavior. This means that users will have difficulty navigating boards with lots of swimlanes with really large lists.

This can be fixed with a simple change to the trello-swimlanes.css:

.list {
    max-height: 50em;
}

All this does is add a max-head attribute the the default Trello list id. As-far-as I know this attribute does not exist by default on the list element as it's not usually needed on standard boards. This does not effect the spacing that Swimlanes adds to Trello, but just causes them to change behavior when they get really large.

50em is what I set it too as it looks nice on my workstation with a tiny screen.

[jyaus]

I must confess -- I see your point, but I'm not fond of the UX that results. The vertical scrollbar is nearly the same color as the list background, which makes it hard to spot that it's even there, which I think could lead to items being accidentally hidden, if a card ends up ending exactly at the list bottom (which happens on some of my boards). And you can only see those additional items by mousing directly over the list and then scrolling, instead of being able to use Page Up/Page Down from anywhere on the page.

I don't deny that it's clumsy to have to scroll down past tall lists to reach the next swimlane, but this introduces a separate clumsiness.

[ClarkAllen1556]

I guess I never noticed the scroll bar color issue as I'm using another extension to add BG colors to my lists. It could be set to a toggle in the extensions options menu, but since this is fixing such a specific issue with my workflow it might not be work it.

For now I'll still use my tamper monkey script and you can close this issue if you feel necessary.

For anyone coming across this issue with hopes of solving a similar problem you can try using the following script in tamper monkey:

// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js

(function () {
    'use strict';
    waitForKeyElements(".board-main-content", () => {
        if (window.location.pathname.includes("<your board name>")) {
            var listConent = document.getElementsByClassName("list");
            for ( let l of listConent) {
                l.style.maxHeight = "50em";
            }
        }
    });
})();

It doesn't add that much to page load time but you should specify which boards you want it to be run on. Also, you'll need the waitForKeyElements JavaScript library as trello elements tend to load in an unpredictable way which effects TM scripts timings.