Add latest changes from gitlab-org/gitlab@master

16 files changed, 253 insertions, 120 deletions

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index d1be7967569..2675099a2f5 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -128,7 +128,7 @@ export default {
   >
     <div class="gl-pb-3 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
-        <gl-icon name="search" class="position-absolute tree-list-icon" />
+        <gl-icon name="search" class="gl-absolute gl-top-5 tree-list-icon" />
         <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label>
         <input
           id="diff-tree-search"
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index 00fb813728e..b7a9583cae9 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -2,7 +2,6 @@
 import { GlButton, GlCollapse } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { isCollapsed, toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager';
-import { SUPER_SIDEBAR_PEEK_DELAY } from '../constants';
 import UserBar from './user_bar.vue';
 import SidebarPortalTarget from './sidebar_portal_target.vue';
 import ContextSwitcherToggle from './context_switcher_toggle.vue';
@@ -33,8 +32,7 @@ export default {
   data() {
     return {
       contextSwitcherOpen: false,
-      isInert: isCollapsed(),
-      isPeek: false,
+      isCollapased: isCollapsed(),
     };
   },
   computed: {
@@ -49,18 +47,6 @@ export default {
     onContextSwitcherShown() {
       this.$refs['context-switcher'].focusInput();
     },
-    onMouseOver() {
-      setTimeout(() => {
-        this.isPeek = true;
-        this.isInert = false;
-      }, SUPER_SIDEBAR_PEEK_DELAY);
-    },
-    onMouseLeave() {
-      setTimeout(() => {
-        this.isPeek = false;
-        this.isInert = true;
-      }, SUPER_SIDEBAR_PEEK_DELAY);
-    },
   },
 };
 </script>
@@ -68,21 +54,14 @@ export default {
 <template>
   <div>
     <div class="super-sidebar-overlay" @click="collapseSidebar"></div>
-    <div
-      v-if="!isPeek"
-      class="super-sidebar-hover-area gl-fixed gl-left-0 gl-top-0 gl-bottom-0 gl-w-3"
-      data-testid="super-sidebar-hover-area"
-      @mouseover="onMouseOver"
-    ></div>
     <aside
       id="super-sidebar"
       class="super-sidebar"
-      :class="{ 'gl-visibility-hidden': isInert, 'super-sidebar-peek': isPeek }"
+      :class="{ 'gl-visibility-hidden': isCollapased }"
       data-testid="super-sidebar"
       data-qa-selector="navbar"
-      :inert="isInert"
+      :inert="isCollapased"
       tabindex="-1"
-      @mouseleave="onMouseLeave"
     >
       <gl-button
         class="super-sidebar-skip-to gl-sr-only-focusable gl-absolute gl-left-3 gl-right-3 gl-top-3"
@@ -91,7 +70,7 @@ export default {
       >
         {{ $options.i18n.skipToMainContent }}
       </gl-button>
-      <user-bar :has-collapse-button="!isPeek" :sidebar-data="sidebarData" />
+      <user-bar :sidebar-data="sidebarData" />
       <div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden">
         <div class="gl-flex-grow-1 gl-overflow-auto">
           <context-switcher-toggle
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 34af935434c..62161f2846a 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -50,11 +50,6 @@ export default {
   },
   inject: ['rootPath'],
   props: {
-    hasCollapseButton: {
-      default: true,
-      type: Boolean,
-      required: false,
-    },
     sidebarData: {
       type: Object,
       required: true,
@@ -94,12 +89,10 @@ export default {
       >
       <div class="gl-flex-grow-1"></div>
       <gl-button
-        v-if="hasCollapseButton"
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.collapseSidebar"
         aria-controls="super-sidebar"
         aria-expanded="true"
         :aria-label="$options.i18n.navigationSidebar"
-        data-testid="super-sidebar-collapse-button"
         icon="sidebar"
         category="tertiary"
         @click="collapseSidebar"
diff --git a/app/assets/javascripts/super_sidebar/constants.js b/app/assets/javascripts/super_sidebar/constants.js
index 23233ab7792..ad9d4bc43f2 100644
--- a/app/assets/javascripts/super_sidebar/constants.js
+++ b/app/assets/javascripts/super_sidebar/constants.js
@@ -13,7 +13,5 @@ export const portalState = Vue.observable({
 export const MAX_FREQUENT_PROJECTS_COUNT = 5;
 export const MAX_FREQUENT_GROUPS_COUNT = 3;
 
-export const SUPER_SIDEBAR_PEEK_DELAY = 150;
-
 export const TRACKING_UNKNOWN_ID = 'item_without_id';
 export const CLICK_MENU_ITEM_ACTION = 'click_menu_item';
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_discussion.vue b/app/assets/javascripts/work_items/components/notes/work_item_discussion.vue
index 7fa99958b9d..6cf15ba50ec 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_discussion.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_discussion.vue
@@ -63,6 +63,16 @@ export default {
       required: false,
       default: () => ({}),
     },
+    assignees: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    canSetWorkItemMetadata: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -153,6 +163,12 @@ export default {
     :autocomplete-data-sources="autocompleteDataSources"
     :markdown-preview-path="markdownPreviewPath"
     :class="{ 'gl-mb-4': hasReplies }"
+    :assignees="assignees"
+    :can-set-work-item-metadata="canSetWorkItemMetadata"
+    :work-item-id="workItemId"
+    :query-variables="queryVariables"
+    :full-path="fullPath"
+    :fetch-by-iid="fetchByIid"
     @startReplying="showReplyForm"
     @deleteNote="$emit('deleteNote', note)"
     @error="$emit('error', $event)"
@@ -179,6 +195,12 @@ export default {
                   :class="{ 'gl-mb-4': hasReplies }"
                   :autocomplete-data-sources="autocompleteDataSources"
                   :markdown-preview-path="markdownPreviewPath"
+                  :assignees="assignees"
+                  :work-item-id="workItemId"
+                  :can-set-work-item-metadata="canSetWorkItemMetadata"
+                  :query-variables="queryVariables"
+                  :full-path="fullPath"
+                  :fetch-by-iid="fetchByIid"
                   @startReplying="showReplyForm"
                   @deleteNote="$emit('deleteNote', note)"
                   @error="$emit('error', $event)"
@@ -200,6 +222,12 @@ export default {
                         :is-modal="isModal"
                         :autocomplete-data-sources="autocompleteDataSources"
                         :markdown-preview-path="markdownPreviewPath"
+                        :assignees="assignees"
+                        :work-item-id="workItemId"
+                        :can-set-work-item-metadata="canSetWorkItemMetadata"
+                        :query-variables="queryVariables"
+                        :full-path="fullPath"
+                        :fetch-by-iid="fetchByIid"
                         @startReplying="showReplyForm"
                         @deleteNote="$emit('deleteNote', reply)"
                         @error="$emit('error', $event)"
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
index 50eb95e20f1..8b25d305398 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
@@ -1,27 +1,26 @@
 <script>
-import { GlAvatarLink, GlAvatar, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
+import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
+import { i18n, TRACKING_CATEGORY_SHOW, WIDGET_TYPE_ASSIGNEES } from '~/work_items/constants';
+import Tracking from '~/tracking';
 import { updateDraft, clearDraft } from '~/lib/utils/autosave';
 import { renderMarkdown } from '~/notes/utils';
 import { getLocationHash } from '~/lib/utils/url_utility';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { getWorkItemQuery } from '~/work_items/utils';
 import EditedAt from '~/issues/show/components/edited.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import NoteBody from '~/work_items/components/notes/work_item_note_body.vue';
 import NoteHeader from '~/notes/components/note_header.vue';
 import NoteActions from '~/work_items/components/notes/work_item_note_actions.vue';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import updateWorkItemNoteMutation from '../../graphql/notes/update_work_item_note.mutation.graphql';
 import WorkItemCommentForm from './work_item_comment_form.vue';
 
 export default {
   name: 'WorkItemNoteThread',
-  i18n: {
-    moreActionsText: __('More actions'),
-    deleteNoteText: __('Delete comment'),
-    copyLinkText: __('Copy link'),
-  },
   components: {
     TimelineEntryItem,
     NoteBody,
@@ -29,15 +28,28 @@ export default {
     NoteActions,
     GlAvatar,
     GlAvatarLink,
-    GlDropdown,
-    GlDropdownItem,
     WorkItemCommentForm,
     EditedAt,
   },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
+  mixins: [Tracking.mixin()],
   props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    fetchByIid: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    queryVariables: {
+      type: Object,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: true,
+    },
     note: {
       type: Object,
       required: true,
@@ -70,6 +82,16 @@ export default {
       required: false,
       default: () => ({}),
     },
+    assignees: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    canSetWorkItemMetadata: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -78,6 +100,13 @@ export default {
     };
   },
   computed: {
+    tracking() {
+      return {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'work_item_note_actions',
+        property: `type_${this.workItemType}`,
+      };
+    },
     author() {
       return this.note.author;
     },
@@ -121,6 +150,28 @@ export default {
     hasAwardEmojiPermission() {
       return this.note.userPermissions.awardEmoji;
     },
+    isAuthorAnAssignee() {
+      return Boolean(this.assignees.filter((assignee) => assignee.id === this.author.id).length);
+    },
+  },
+  apollo: {
+    workItem: {
+      query() {
+        return getWorkItemQuery(this.fetchByIid);
+      },
+      variables() {
+        return this.queryVariables;
+      },
+      update(data) {
+        return this.fetchByIid ? data.workspace.workItems.nodes[0] : data.workItem;
+      },
+      skip() {
+        return !this.queryVariables.id && !this.queryVariables.iid;
+      },
+      error() {
+        this.$emit('error', i18n.fetchError);
+      },
+    },
   },
   methods: {
     showReplyForm() {
@@ -171,12 +222,68 @@ export default {
         this.isSubmitting = false;
       }
     },
+    getNewAssigneesAndWidget() {
+      let newAssignees = [];
+      if (this.isAuthorAnAssignee) {
+        newAssignees = this.assignees.filter(({ id }) => id !== this.author.id);
+      } else {
+        newAssignees = [...this.assignees, this.author];
+      }
+
+      const isAssigneesWidget = (widget) => widget.type === WIDGET_TYPE_ASSIGNEES;
+
+      const assigneesWidgetIndex = this.workItem.widgets.findIndex(isAssigneesWidget);
+
+      const editedWorkItemWidgets = [...this.workItem.widgets];
+
+      editedWorkItemWidgets[assigneesWidgetIndex] = {
+        ...editedWorkItemWidgets[assigneesWidgetIndex],
+        assignees: {
+          nodes: newAssignees,
+        },
+      };
+
+      return {
+        newAssignees,
+        editedWorkItemWidgets,
+      };
+    },
     notifyCopyDone() {
       if (this.isModal) {
         navigator.clipboard.writeText(this.noteUrl);
       }
       toast(__('Link copied to clipboard.'));
     },
+    async assignUserAction() {
+      const { newAssignees, editedWorkItemWidgets } = this.getNewAssigneesAndWidget();
+
+      try {
+        await this.$apollo.mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              assigneesWidget: {
+                assigneeIds: newAssignees.map(({ id }) => id),
+              },
+            },
+          },
+          optimisticResponse: {
+            workItemUpdate: {
+              errors: [],
+              workItem: {
+                ...this.workItem,
+                widgets: editedWorkItemWidgets,
+              },
+            },
+          },
+        });
+        this.track(`${this.isAuthorAnAssignee ? 'unassigned_user' : 'assigned_user'}`);
+      } catch (error) {
+        this.$emit('error', i18n.updateError);
+        Sentry.captureException(error);
+      }
+    },
   },
 };
 </script>
@@ -200,7 +307,6 @@ export default {
         :aria-label="__('Edit comment')"
         :autosave-key="autosaveKey"
         :initial-value="note.body"
-        :is-submitting="isSubmitting"
         :comment-button-text="__('Save comment')"
         :autocomplete-data-sources="autocompleteDataSources"
         :markdown-preview-path="markdownPreviewPath"
@@ -224,32 +330,15 @@ export default {
               :show-reply="showReply"
               :show-edit="hasAdminPermission"
               :note-id="note.id"
+              :is-author-an-assignee="isAuthorAnAssignee"
+              :show-assign-unassign="canSetWorkItemMetadata"
               @startReplying="showReplyForm"
               @startEditing="startEditing"
               @error="($event) => $emit('error', $event)"
+              @notifyCopyDone="notifyCopyDone"
+              @deleteNote="$emit('deleteNote')"
+              @assignUser="assignUserAction"
             />
-            <gl-dropdown
-              v-gl-tooltip
-              icon="ellipsis_v"
-              text-sr-only
-              right
-              :text="$options.i18n.moreActionsText"
-              :title="$options.i18n.moreActionsText"
-              category="tertiary"
-              no-caret
-            >
-              <gl-dropdown-item :data-clipboard-text="noteUrl" @click="notifyCopyDone">
-                <span>{{ $options.i18n.copyLinkText }}</span>
-              </gl-dropdown-item>
-              <gl-dropdown-item
-                v-if="hasAdminPermission"
-                variant="danger"
-                data-testid="delete-note-action"
-                @click="$emit('deleteNote')"
-              >
-                {{ $options.i18n.deleteNoteText }}
-              </gl-dropdown-item>
-            </gl-dropdown>
           </div>
         </div>
         <div class="timeline-discussion-body">
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
index 6bea7953698..624a532c2aa 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { __, s__ } from '~/locale';
 import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
@@ -10,11 +10,18 @@ export default {
   name: 'WorkItemNoteActions',
   i18n: {
     editButtonText: __('Edit comment'),
+    moreActionsText: __('More actions'),
+    deleteNoteText: __('Delete comment'),
+    copyLinkText: __('Copy link'),
+    assignUserText: __('Assign to commenting user'),
+    unassignUserText: __('Unassign from commenting user'),
   },
   components: {
     GlButton,
     GlIcon,
     ReplyButton,
+    GlDropdown,
+    GlDropdownItem,
     EmojiPicker: () => import('~/emoji/components/picker.vue'),
   },
   directives: {
@@ -39,6 +46,28 @@ export default {
       required: false,
       default: false,
     },
+    noteUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isAuthorAnAssignee: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showAssignUnassign: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    assignUserActionText() {
+      return this.isAuthorAnAssignee
+        ? this.$options.i18n.unassignUserText
+        : this.$options.i18n.assignUserText;
+    },
   },
   methods: {
     async setAwardEmoji(name) {
@@ -100,5 +129,39 @@ export default {
       :aria-label="$options.i18n.editButtonText"
       @click="$emit('startEditing')"
     />
+    <gl-dropdown
+      v-gl-tooltip
+      data-testid="work-item-note-actions"
+      icon="ellipsis_v"
+      text-sr-only
+      right
+      :text="$options.i18n.moreActionsText"
+      :title="$options.i18n.moreActionsText"
+      category="tertiary"
+      no-caret
+    >
+      <gl-dropdown-item
+        data-testid="copy-link-action"
+        :data-clipboard-text="noteUrl"
+        @click="$emit('notifyCopyDone')"
+      >
+        <span>{{ $options.i18n.copyLinkText }}</span>
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-if="showAssignUnassign"
+        data-testid="assign-note-action"
+        @click="$emit('assignUser')"
+      >
+        {{ assignUserActionText }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-if="showEdit"
+        variant="danger"
+        data-testid="delete-note-action"
+        @click="$emit('deleteNote')"
+      >
+        {{ $options.i18n.deleteNoteText }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index f568e23a30a..aed2187a3e6 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -224,15 +224,18 @@ export default {
     canDelete() {
       return this.workItem?.userPermissions?.deleteWorkItem;
     },
+    canSetWorkItemMetadata() {
+      return this.workItem?.userPermissions?.setWorkItemMetadata;
+    },
+    canAssignUnassignUser() {
+      return this.workItemAssignees && this.canSetWorkItemMetadata;
+    },
     confidentialTooltip() {
       return sprintfWorkItem(this.$options.i18n.confidentialTooltip, this.workItemType);
     },
     fullPath() {
       return this.workItem?.project.fullPath;
     },
-    workItemsMvcEnabled() {
-      return this.glFeatures.workItemsMvc;
-    },
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
     },
@@ -711,8 +714,11 @@ export default {
           :fetch-by-iid="fetchByIid"
           :work-item-type="workItemType"
           :is-modal="isModal"
+          :assignees="workItemAssignees && workItemAssignees.assignees.nodes"
+          :can-set-work-item-metadata="canAssignUnassignUser"
           class="gl-pt-5"
           @error="updateError = $event"
+          @has-notes="updateHasNotes"
         />
         <gl-empty-state
           v-if="error"
diff --git a/app/assets/javascripts/work_items/components/work_item_notes.vue b/app/assets/javascripts/work_items/components/work_item_notes.vue
index 2a45cc968d8..a1f1eda8bc5 100644
--- a/app/assets/javascripts/work_items/components/work_item_notes.vue
+++ b/app/assets/javascripts/work_items/components/work_item_notes.vue
@@ -78,6 +78,16 @@ export default {
       required: false,
       default: false,
     },
+    assignees: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    canSetWorkItemMetadata: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -375,6 +385,8 @@ export default {
                 :is-modal="isModal"
                 :autocomplete-data-sources="autocompleteDataSources"
                 :markdown-preview-path="markdownPreviewPath"
+                :assignees="assignees"
+                :can-set-work-item-metadata="canSetWorkItemMetadata"
                 @deleteNote="showDeleteNoteModal($event, discussion)"
                 @error="$emit('error', $event)"
               />
diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
index ada9f737e6e..3651cad48f6 100644
--- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql
@@ -27,6 +27,7 @@ fragment WorkItem on WorkItem {
   userPermissions {
     deleteWorkItem
     updateWorkItem
+    setWorkItemMetadata
   }
   widgets {
     ...WorkItemWidgets
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index b20ec1dc50a..c452c401cfb 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -268,14 +268,8 @@
 
 @mixin build-log-top-bar($height) {
   @include build-log-bar($height);
-
-  position: -webkit-sticky;
   position: sticky;
-  top: $header-height;
-
-  .with-performance-bar & {
-    top: calc(#{$header-height} + #{$performance-bar-height});
-  }
+  top: $calc-application-header-height;
 }
 
 /*
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 52561e5deb1..48c87682897 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -49,9 +49,7 @@
   }
 
   &:not(.super-sidebar-loading) {
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform $gl-transition-duration-medium ease-out;
-    }
+    transition: transform $gl-transition-duration-medium;
   }
 
   .user-bar {
@@ -156,26 +154,9 @@
   display: none;
 }
 
-.super-sidebar-peek {
-  @include gl-shadow;
-  border-right: 0;
-  transform: translate3d(0, 0, 0) !important;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: transform 100ms ease-out !important;
-  }
-}
-
-.super-sidebar-hover-area {
-  z-index: $super-sidebar-z-index;
-}
-
 .page-with-super-sidebar {
   padding-left: 0;
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: padding-left $gl-transition-duration-medium ease-out;
-  }
+  transition: padding-left $gl-transition-duration-medium;
 
   &:not(.page-with-super-sidebar-collapsed) {
     .super-sidebar-overlay {
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index d40c03b7fd1..5114f484e53 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -6,30 +6,22 @@
   }
 
   .archived-job {
-    top: $header-height;
+    top: $calc-application-header-height;
     border-radius: 2px 2px 0 0;
     color: var(--orange-600, $orange-600);
     background-color: var(--orange-50, $orange-50);
     border: 1px solid var(--border-color, $border-color);
-
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height});
-    }
   }
 
   .top-bar {
     @include build-log-top-bar(50px);
 
     &.has-archived-block {
-      top: calc(#{$header-height} + 28px);
-
-      .with-performance-bar & {
-        top: calc(#{$header-height} + #{$performance-bar-height} + 28px);
-      }
+      top: calc(#{$calc-application-header-height} + 28px);
     }
 
     &.affix {
-      top: $header-height;
+      top: $calc-application-header-height;
 
       // with sidebar
       &.sidebar-expanded {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index aeaa46c2b86..65cae126795 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1472,13 +1472,9 @@ kbd {
     transform: translate3d(0, 0, 0);
   }
 }
-@media (prefers-reduced-motion: no-preference) {
-}
 .page-with-super-sidebar {
   padding-left: 0;
 }
-@media (prefers-reduced-motion: no-preference) {
-}
 @media (min-width: 1200px) {
   .page-with-super-sidebar {
     padding-left: 256px;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index e6589cb73a0..c5d9721d93c 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1472,13 +1472,9 @@ kbd {
     transform: translate3d(0, 0, 0);
   }
 }
-@media (prefers-reduced-motion: no-preference) {
-}
 .page-with-super-sidebar {
   padding-left: 0;
 }
-@media (prefers-reduced-motion: no-preference) {
-}
 @media (min-width: 1200px) {
   .page-with-super-sidebar {
     padding-left: 256px;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 7b6e3a5c521..d366649916d 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -430,8 +430,12 @@ input.btn-block[type="button"] {
   cursor: not-allowed;
   color: #89888d;
 }
+.gl-form-checkbox.custom-control {
+  padding-left: 1rem;
+}
 .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
   cursor: pointer;
+  padding-left: 0.5rem;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input
@@ -440,6 +444,7 @@ input.btn-block[type="button"] {
   .custom-control-input
   ~ .custom-control-label::after {
   top: 0;
+  left: -1rem;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input