feat(#31666): Set the columns height to hug all its contents

[SimonPistache]

In Projects, columns heights are defined by the sum of all contents height of the biggest column, rather than a fraction of the viewport height. It default to 60vh when there is no cards to display.

---

See issue #31666

[SimonPistache]

I noticed a visual bug while dragging issues around

Enregistrement.de.l.ecran.2024-07-29.a.19.58.42.mov

Looking for a fix

[SimonPistache]

With the fix:

Enregistrement.de.l.ecran.2024-08-06.a.09.20.21.mov

[SimonPistache]

I improved the columns behaviours when there is no cards in it. Now, the columns either takes all available height in the viewport, except if it's too small, defaulting to 300px height (and forcing a viewport scrollbar). This makes a newly created Project board attractive to start with.

Boards already having cards are not affected by this (Columns takes all available height from the viewport, except if it's too small then it "hug" by its contents.)

Enregistrement.de.l.ecran.2024-08-06.a.09.54.37.mov

[SimonPistache]

There is an issue with this solution: The horizontal scrollbar is way down the board when there is more columns than the viewport can display at once.

Idea:
Using 2 divs to manage scrollbar individually:

<div id="project_board">
  <div class="class="board sortable"">

  </div>
</div>

#project_board {
    overflow-x: auto;
    overflow-y: hidden;
}

#project_board > .board {
    overflow-y: auto;
    display: inline-block;
    height: 100vh;
    white-space: normal;
}

This is going back as the idea of the board only overflowing a sub-rectangle of the viewport instead. And that this parent div must have some management of its (own) height.