Merge pull request #7173 from opf/fix/29824-Space-below-the-horizontal-scroll-in-boards-view

[29824][Boards] Space below the horizontal scroll in boards view

frontend/src/app/modules/boards/board/board-list/board-list.component.sass

@@ -1,9 +1,11 @@
 .board-list--query-container
+  // 100% - board header height - padding
+  height: calc(100% - 43px - 10px)
   padding: 5px 0
-  height: 75vh
   overflow-y: auto
 
 .board-list--container
+  height: 100%
   border: 1px solid #ccc
   border-radius: 5px
 
@@ -22,9 +24,3 @@
     flex: 1
     margin-bottom: 0
     margin-right: 0.25rem
-
-wp-embedded-table
-  wp-card-view
-
-  height: 100%
-  display: block

frontend/src/app/modules/boards/board/board.component.sass

@@ -1,7 +1,12 @@
+// Let board list span whole screen
+.controller-boards\/boards #content
+  height: 100%
+
 .boards-list--container
   display: flex
   flex-direction: row
   flex-wrap: nowrap
+  flex-grow: 1
 
   // Make it scrollable
   padding-bottom: 2px
@@ -10,7 +15,7 @@
 .boards-list--item
   flex: 0 0 300px
   max-width: 300px
-  margin-left: 2rem
+  margin-left: 1rem
   position: relative
 
   &:first-child
@@ -20,9 +25,6 @@
   display: flex
   align-items: flex-start
 
-.board--name-header
-  list-style: none
-
 .boards-list-item-handle
   position: absolute
   font-size: 14px
@@ -60,11 +62,14 @@
 
 .board--container
   position: relative
+  display: flex
+  flex-direction: column
+  height: 100%
 
   // Changes when container is editable
   &.-editable
-  .boards-list--add-item
-    cursor: pointer
+    .boards-list--add-item
+      cursor: pointer
 
-.boards-filters-container
+.boards-filters-container .work-packages--filters-optional-container
   margin-bottom: 1rem

frontend/src/app/modules/boards/board/board.component.ts

@@ -1,4 +1,4 @@
-import {Component, Injector, OnDestroy, OnInit, QueryList, ViewChildren} from "@angular/core";
+import {Component, Injector, OnDestroy, OnInit, QueryList, ViewChildren, ViewEncapsulation} from "@angular/core";
 import {DragAndDropService} from "core-app/modules/boards/drag-and-drop/drag-and-drop.service";
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
@@ -22,6 +22,8 @@ import {ApiV3Filter} from "core-components/api/api-v3/api-v3-filter-builder";
   selector: 'board',
   templateUrl: './board.component.html',
   styleUrls: ['./board.component.sass'],
+  // Necessary to let the board span the complete height of the screen
+  encapsulation: ViewEncapsulation.None,
   providers: [
     DragAndDropService,
   ]