Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 1 deletions

diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index d99afa8455d..0d2e49c966f 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import { sortBy } from 'lodash';
+import { sortBy, throttle } from 'lodash';
 import Draggable from 'vuedraggable';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
@@ -26,6 +26,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      boardHeight: null,
+    };
+  },
   computed: {
     ...mapState(['boardLists', 'error', 'addColumnForm']),
     ...mapGetters(['isSwimlanesOn', 'isEpicBoard', 'isIssueBoard']),
@@ -55,12 +60,28 @@ export default {
       return this.canDragColumns ? options : {};
     },
   },
+  mounted() {
+    this.setBoardHeight();
+
+    this.resizeObserver = new ResizeObserver(
+      throttle(() => {
+        this.setBoardHeight();
+      }, 150),
+    );
+    this.resizeObserver.observe(document.body);
+  },
+  unmounted() {
+    this.resizeObserver.disconnect();
+  },
   methods: {
     ...mapActions(['moveList', 'unsetError']),
     afterFormEnters() {
       const el = this.canDragColumns ? this.$refs.list.$el : this.$refs.list;
       el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });
     },
+    setBoardHeight() {
+      this.boardHeight = `${window.innerHeight - this.$el.getBoundingClientRect().top}px`;
+    },
   },
 };
 </script>
@@ -76,6 +97,7 @@ export default {
       ref="list"
       v-bind="draggableOptions"
       class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll"
+      :style="{ height: boardHeight }"
       @end="moveList"
     >
       <board-column
@@ -99,6 +121,7 @@ export default {
       :lists="boardListsToUse"
       :can-admin-list="canAdminList"
       :disabled="disabled"
+      :style="{ height: boardHeight }"
     />
 
     <board-content-sidebar v-if="isIssueBoard" data-testid="issue-boards-sidebar" />