Cacher is the code snippet organizer for pro developers

// ==UserScript==
// @name        [Trello] Resizable List
// @namespace   https://gist.github.com/tkrkt
// @include     https://trello.com/*
// @version     1
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

const css = `
.resize-handle {
  position: absolute;
  height: 100%;
  width: 15px;
  top: 0;
  right: -5px;
  cursor: ew-resize;
}
`;

const wait = callback => {
  setTimeout(() => {
    if (document.querySelector('#board .list')) {
      callback();
    } else {
      wait(callback);
    }
  }, 1000);
};

wait(() => {
  const pathname = location.pathname;
  const setting = GM_getValue(pathname) || {};
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  let current = null;
  const handleMousedown = (event, {wrapper, list, name}) => {
    current = {
      wrapper,
      list,
      name,
      listWidth: wrapper.getBoundingClientRect().width,
      pointerLeft: event.clientX
    };
  };
  const handleMousemove = (event) => {
    if (current) {
      const change = event.clientX - current.pointerLeft;
      const width = Math.max(80, current.listWidth + change);
      current.wrapper.style.width = width + 'px';
    }
  };
  const handleMouseup = event => {
    if (current) {
      const change = event.clientX - current.pointerLeft;
      const width = Math.max(80, current.listWidth + change);
      current.wrapper.style.width = width + 'px';
      setting[current.name] = width;
      GM_setValue(pathname, setting);
      current = null;
    }
  };

  const wrappers = Array.from(document.querySelectorAll('#board .js-list.list-wrapper'));
  wrappers.forEach(wrapper => {
    const name = wrapper.querySelector('textarea.list-header-name').textContent;
    wrapper.setAttribute('data-listname', name);
    if (setting[name]) {
      wrapper.style.width = `${setting[name]}px`;
    }
    const list = wrapper.firstChild;
    const handle = document.createElement('div');
    handle.classList.add('resize-handle');
    list.appendChild(handle);
    handle.addEventListener('mousedown', event => {
      handleMousedown(event, {wrapper, list, name});
    });
  });
  document.addEventListener('mousemove', handleMousemove);
  document.addEventListener('mouseup', handleMouseup);
});