Merge branch 'Projects--dropdown-is-misaligned-on-issue-boards-page' into 'master'

Projects  dropdown is misaligned on issue boards page

Closes #48682 and #54920

See merge request gitlab-org/gitlab-ce!24277

app/assets/javascripts/boards/components/board_list.vue

@@ -221,7 +221,7 @@ export default {
 </script>
 
 <template>
-  <div class="board-list-component">
+  <div class="board-list-component d-flex flex-column">
     <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
       <gl-loading-icon />
     </div>

app/assets/javascripts/boards/components/project_select.vue

@@ -82,7 +82,7 @@ export default {
 <template>
   <div>
     <label class="label-bold prepend-top-10"> Project </label>
-    <div ref="projectsDropdown" class="dropdown">
+    <div ref="projectsDropdown" class="dropdown dropdown-projects">
       <button
         class="dropdown-menu-toggle wide"
         type="button"

app/assets/stylesheets/pages/boards.scss

@@ -26,6 +26,12 @@
   opacity: 0.3;
 }
 
+.dropdown-projects {
+  .dropdown-content {
+    max-height: 200px;
+  }
+}
+
 .dropdown-menu-issues-board-new {
   width: 320px;
 
@@ -167,6 +173,7 @@
   background: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  flex: 1;
 }
 
 .board-header {
@@ -228,9 +235,11 @@
 }
 
 .board-blank-state {
-  height: calc(100% - 49px);
   padding: $gl-padding;
   background-color: $white-light;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .board-blank-state-list {
@@ -252,9 +261,9 @@
 }
 
 .board-list-component {
-  height: calc(100% - 49px);
-  overflow: hidden;
   position: relative;
+  flex: 1;
+  min-height: 0; // firefox fix
 }
 
 .board-list {

app/views/shared/boards/components/_board.html.haml

 .board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
   ":data-id" => "list.id" }
-  .board-inner
+  .board-inner.d-flex.flex-column
     %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
       %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
         %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable",

changelogs/unreleased/Projects--dropdown-is-misaligned-on-issue-boards-page.yml

+---
+title: Proper align Projects dropdown on issue boards page
+merge_request: 24277
+author: Johann Hubert Sonntagbauer
+type: fixed