fix: record board column border spans the available screen height

[orinamio]

Resolves #5273

[FelixMalfait]

I'm going to be annoying but this introduces a small unnecessary vertical scroll, could you try fix that?

Thanks a lot!

[orinamio]

@FelixMalfait I agree the scroll is unnecessary and ugly.

A solution for the vertical scroll is to hide the scroll permanently using display: none; or something similar. However, I don't think it's the best approach. When more row items are in a column, the scroll should be visible. This is good for the user experience.

I tried to use @container CSS. But this breaks the Drag and Drop component. I couldn't find out why it was happening.

  container-type: size;

  .os-scrollbar-vertical {
    display: none;
  }

  @container (height > [SIZE]) {
    .os-scrollbar-vertical {
      display: unset;
    }
  }

The container rule breaks the dnd:

dnd.mov

Furthermore, using JavaScript to fix this doesn't seem appropriate.

Do you have any suggestions? cc: @Weiko

[orinamio]

This is the behaviour when the scrollbar is removed:

without_vertical_scrollbar.mov

If this is acceptable, I'll go ahead and add this fix. Otherwise, I ask that someone else looks into it.

[FelixMalfait]

Thanks @orinamio! We try to set the design/quality bar high so hiding the scrollbar isn't good enough, we should try to find the right solution. We'll wait for someone else to look into this. Thanks a lot for your help!