Merge branch 'psi-swimlane-scrollcontainer' into 'master'

Add inner scroll container to swimlanes

See merge request gitlab-org/gitlab!54172

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -104,88 +104,95 @@ export default {
 
 <template>
   <div
-    class="board-swimlanes gl-white-space-nowrap gl-pb-5 gl-px-3"
+    ref="scrollableContainer"
+    class="board-swimlanes gl-white-space-nowrap gl-pb-5 gl-px-3 gl-display-flex gl-flex-grow-1"
     data-testid="board-swimlanes"
     data_qa_selector="board_epics_swimlanes"
   >
-    <component
-      :is="treeRootWrapper"
-      v-bind="treeRootOptions"
-      class="board-swimlanes-headers gl-display-table gl-sticky gl-pt-5 gl-mb-5 gl-bg-white gl-top-0 gl-z-index-3"
-      data-testid="board-swimlanes-headers"
-      @end="handleDragOnEnd"
-    >
-      <div
-        v-for="list in lists"
-        :key="list.id"
-        :class="{
-          'is-collapsed': list.collapsed,
-          'is-draggable': isListDraggable(list),
-        }"
-        class="board gl-display-inline-block gl-px-3 gl-vertical-align-top gl-white-space-normal"
-        :data-list-id="list.id"
-        data-testid="board-header-container"
+    <div>
+      <component
+        :is="treeRootWrapper"
+        v-bind="treeRootOptions"
+        class="board-swimlanes-headers gl-display-table gl-sticky gl-pt-5 gl-mb-5 gl-bg-white gl-top-0 gl-z-index-3"
+        data-testid="board-swimlanes-headers"
+        @end="handleDragOnEnd"
       >
-        <board-list-header
-          :can-admin-list="canAdminList"
-          :list="list"
-          :disabled="disabled"
-          :is-swimlanes-header="true"
-        />
-      </div>
-    </component>
-    <div class="board-epics-swimlanes gl-display-table">
-      <epic-lane
-        v-for="epic in epics"
-        :key="epic.id"
-        :epic="epic"
-        :lists="lists"
-        :disabled="disabled"
-        :can-admin-list="canAdminList"
-      />
-      <div class="board-lane-unassigned-issues-title gl-sticky gl-display-inline-block gl-left-0">
-        <div class="gl-left-0 gl-pb-5 gl-px-3 gl-display-flex gl-align-items-center">
-          <span
-            class="gl-mr-3 gl-font-weight-bold gl-white-space-nowrap gl-text-overflow-ellipsis gl-overflow-hidden"
-          >
-            {{ __('Issues with no epic assigned') }}
-          </span>
-          <span
-            v-gl-tooltip.hover
-            :title="unassignedIssuesCountTooltipText"
-            class="gl-display-flex gl-align-items-center gl-text-gray-500"
-            tabindex="0"
-            :aria-label="unassignedIssuesCountTooltipText"
-            data-testid="issues-lane-issue-count"
-          >
-            <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" />
-            <span aria-hidden="true">{{ unassignedIssuesCount }}</span>
-          </span>
-        </div>
-      </div>
-      <div data-testid="board-lane-unassigned-issues">
-        <div class="gl-display-flex">
-          <issues-lane-list
-            v-for="list in lists"
-            :key="`${list.id}-issues`"
+        <div
+          v-for="list in lists"
+          :key="list.id"
+          :class="{
+            'is-collapsed': list.collapsed,
+            'is-draggable': isListDraggable(list),
+          }"
+          class="board gl-display-inline-block gl-px-3 gl-vertical-align-top gl-white-space-normal"
+          :data-list-id="list.id"
+          data-testid="board-header-container"
+        >
+          <board-list-header
+            :can-admin-list="canAdminList"
             :list="list"
-            :issues="unassignedIssues(list.id)"
-            :is-unassigned-issues-lane="true"
             :disabled="disabled"
-            :can-admin-list="canAdminList"
+            :is-swimlanes-header="true"
           />
         </div>
+      </component>
+      <div class="board-epics-swimlanes gl-display-table gl-pb-5">
+        <epic-lane
+          v-for="epic in epics"
+          :key="epic.id"
+          :epic="epic"
+          :lists="lists"
+          :disabled="disabled"
+          :can-admin-list="canAdminList"
+        />
+        <div class="board-lane-unassigned-issues-title gl-sticky gl-display-inline-block gl-left-0">
+          <div class="gl-left-0 gl-pb-5 gl-px-3 gl-display-flex gl-align-items-center">
+            <span
+              class="gl-mr-3 gl-font-weight-bold gl-white-space-nowrap gl-text-overflow-ellipsis gl-overflow-hidden"
+            >
+              {{ __('Issues with no epic assigned') }}
+            </span>
+            <span
+              v-gl-tooltip.hover
+              :title="unassignedIssuesCountTooltipText"
+              class="gl-display-flex gl-align-items-center gl-text-gray-500"
+              tabindex="0"
+              :aria-label="unassignedIssuesCountTooltipText"
+              data-testid="issues-lane-issue-count"
+            >
+              <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" />
+              <span aria-hidden="true">{{ unassignedIssuesCount }}</span>
+            </span>
+          </div>
+        </div>
+        <div data-testid="board-lane-unassigned-issues">
+          <div class="gl-display-flex">
+            <issues-lane-list
+              v-for="list in lists"
+              :key="`${list.id}-issues`"
+              :list="list"
+              :issues="unassignedIssues(list.id)"
+              :is-unassigned-issues-lane="true"
+              :disabled="disabled"
+              :can-admin-list="canAdminList"
+            />
+          </div>
+        </div>
       </div>
-    </div>
-    <div v-if="hasMoreUnassignedIssues" class="gl-p-3 gl-pr-0 gl-sticky gl-left-0 gl-max-w-full">
-      <gl-button
-        category="tertiary"
-        variant="info"
-        class="gl-w-full"
-        @click="fetchMoreUnassignedIssues()"
+      <div
+        v-if="hasMoreUnassignedIssues"
+        class="gl-p-3 gl-sticky gl-left-0"
+        style="max-width: 100vw"
       >
-        {{ s__('Board|Load more issues') }}
-      </gl-button>
+        <gl-button
+          category="tertiary"
+          variant="info"
+          class="gl-w-full"
+          @click="fetchMoreUnassignedIssues()"
+        >
+          {{ s__('Board|Load more issues') }}
+        </gl-button>
+      </div>
     </div>
   </div>
 </template>