Project page columns' height to be set by contents rather than viewports

[SimonPistache]

Feature Description

Currently, the Project page contains columns whose height are defined by either a minimal value or a fraction of the available viewport.

If this looks pleasing on large screens — on smaller screens (using a Macbook 14"), browsing 30+ issues is not ideal:

• Its harder to have an overview of the kanban board
• Peeking or Seeking issues is more complexe
• Browsing issues require a lot of individual scroll actions
• Scrollbars eat up each column available surface, especially for user on Windows 10 and below and some Linux Distros, some browsers or specific (accessibility) settings
• Searching issues (via browser text search — a.k.a Ctrl+F) doesn't correctly scroll down to the highlighted match (tested on Firefox)

---

I propose to instead set the Project board to take as much space a needed by its content:

• Can make the webpage veeeeeeeery long
• 1 global scrollbar
• More effective peeking for issues
• Scroll to the match when text searching
• Access to the page footer is longer
• 1 line of code to implement?

---

It's easy to test an implementation by deleting the height: calc(100vh - 450px); rule from .project-column selector in index.css §9711:

.project-column {
  background-color:var(--color-project-board-bg)!important;
  border:1px solid var(--color-secondary)!important;
  margin:0 .5rem!important;
  padding:.5rem!important;
  width:320px;
  height:fit-content;
  /*height:calc(100vh - 450px);*/
  min-height:60vh;
  flex:0 0 auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
  cursor:default
}

What do you think? Could that help make the Kanban board easier and quicker to use?

Screenshots

[SimonPistache]

I realised there are room for improvement in my suggestion…

The issue is the columns are uneven:

---

As the columns are in a flexbox container, it's easy to set them to have all the same size of the biggest one:

.board {
  /* […] */
  align-items: stretch;
}

.project-column {
  /* […] */
  height: initial; /* Or remove the attribute entirely */
}

[lunny]

Looks better than before.

[SimonPistache]

I'll do a PR then