Board does not scroll horizontally on Ubuntu (no scrollbar and mouse scroll doesn't work)

[jhodgdon-drp]

I am viewing https://contribkanban.com/board/GettingInvolvedGuide on a Desktop browser. I've tried both Firefox v. 68 and Chromium v. 76 on Ubuntu.

Problem 1: I don't see an obvious way to scroll the view to the right, so all I can see are the Postponed, Active, Needs work, and Needs review issues. There should be a horizontal scrollbar so that I can see the rest of the columns.

Problem 2: I mentioned this in a Drupal Slack channel, and someone told me he was able to click and drag to scroll left/right with a mouse. He was using Chrome, but I was unable to do that -- I tried, but clicking and dragging had no effect.

Problem 3: Even if I could click/drag to scroll, someone who could not use a mouse (accessibility matters!) would not be able to do that either. Also it didn't seem intuitive to me that this would be how to scroll the window to the right.

[jhodgdon-drp]

The other user who said he could click-drag says:

Oh, just realized it was working for me because I had Chrome DevTools open in "mobile" mode, so it was just "swiping".

[mglaman]

Someone else reported this, and it was only reproducible on Ubuntu as well. The styling is hacky and carried over from the original version years and years ago.

[jhodgdon-drp]

Are you saying that there is a horizontal scrollbar that is visible in some desktop browsers? That's interesting...

[jhodgdon-drp]

I tried a few CSS things in Inspect Element in the browser, and didn't come up with anything obvious. I am not familiar with the "flex container" thing that it is using...

[jhodgdon-drp]

I was looking at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and I played around with a "pen" that they had, to look at the CSS styling for flexboxes.

I was able to see the scrollbars in my Ubuntu Firefox browser, with HTML/CSS that looked like this:

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

.flex-container {
  list-style: none;
  flex-wrap: nowrap;
  display: flex;
  justify-content: space-around;
}

.flex-item {
  margin: 10px;
  width: 200px;
  height: 150px;
  flex: 0 0 200px;

  /* This stuff below is just to make red boxes with large white numbers for the demo display */  
  background: tomato;
  padding: 5px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

So, the basic flex CSS does produce a horizontal scrollbar on my browser. It must be something to do with all the layers of containers.

Note added later: The scrollbars also still worked when I added 3 levels of divs outside of the UL in the above HTML code, as long as I didn't add any CSS styles to the divs.

[jhodgdon-drp]

Ah! I am finding out from other users that they do not see horizontal scrollbars, but instead are only scrolling with the mouse (which doesn't work for me).

My guess is that this is done via some JS somewhere and not in the CSS -- or at least, I cannot figure out how to manipulate the CSS in Inspect Element to get scrollbars back. But browsing through the source of this project, it is not obvious to me which JS might be doing this???

So... I'm out of ideas.