Add latest changes from gitlab-org/gitlab@master

19 files changed, 136 insertions, 161 deletions

diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index 95155181c78..e233a0cef0a 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/app/assets/javascripts/diffs/i18n.js
@@ -2,7 +2,7 @@ import { __, s__ } from '~/locale';
 
 export const GENERIC_ERROR = __('Something went wrong on our end. Please try again!');
 export const LOAD_SINGLE_DIFF_FAILED = s__(
-  'MergeRequest|Encountered an issue while trying to fetch the single file diff.',
+  "MergeRequest|Can't fetch the diff needed to update this view. Please reload this page.",
 );
 export const DISCUSSION_SINGLE_DIFF_FAILED = s__(
   "MergeRequest|Can't fetch the single file diff for the discussion. Please reload this page.",
diff --git a/app/assets/javascripts/import/details/components/import_details_app.vue b/app/assets/javascripts/import/details/components/import_details_app.vue
new file mode 100644
index 00000000000..ab9242b9081
--- /dev/null
+++ b/app/assets/javascripts/import/details/components/import_details_app.vue
@@ -0,0 +1,22 @@
+<script>
+import { s__ } from '~/locale';
+
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  i18n: {
+    pageTitle: s__('Import|GitHub import details'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h1>{{ $options.i18n.pageTitle }}</h1>
+  </div>
+</template>
diff --git a/app/assets/javascripts/import/details/index.js b/app/assets/javascripts/import/details/index.js
new file mode 100644
index 00000000000..70850d947e2
--- /dev/null
+++ b/app/assets/javascripts/import/details/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import ImportDetailsApp from './components/import_details_app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-import-details');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'ImportDetailsRoot',
+    render(createElement) {
+      return createElement(ImportDetailsApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 150a1b16e58..dee8d11c065 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -170,6 +170,7 @@ function createApolloClient(resolvers = {}, config = {}) {
           config: {
             url: httpResponse.url,
             operationName: operation.operationName,
+            method: operation.getContext()?.fetchOptions?.method || 'POST', // If method is not explicitly set, we default to POST request
           },
           headers: {
             'x-request-id': httpResponse.headers.get('x-request-id'),
diff --git a/app/assets/javascripts/pages/import/github/details/index.js b/app/assets/javascripts/pages/import/github/details/index.js
new file mode 100644
index 00000000000..44a85589c9d
--- /dev/null
+++ b/app/assets/javascripts/pages/import/github/details/index.js
@@ -0,0 +1,3 @@
+import initImportDetails from '~/import/details';
+
+initImportDetails();
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 59a532461ab..2c5f4354d38 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlLink } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { glEmojiTag } from '~/emoji';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -12,6 +13,7 @@ export default {
   components: {
     AddRequest,
     DetailedMetric,
+    GlLink,
     RequestSelector,
   },
   directives: {
@@ -30,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    requestMethod: {
+      type: String,
+      required: true,
+    },
     peekUrl: {
       type: String,
       required: true,
@@ -108,9 +114,6 @@ export default {
         this.currentRequestId = requestId;
       },
     },
-    initialRequest() {
-      return this.currentRequestId === this.requestId;
-    },
     hasHost() {
       return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
     },
@@ -135,6 +138,9 @@ export default {
     showZoekt() {
       return document.body.dataset.page === 'search:show';
     },
+    showFlamegraphButtons() {
+      return this.currentRequest.details && this.isGetRequest(this.currentRequestId);
+    },
   },
   created() {
     if (!this.showZoekt) {
@@ -151,12 +157,15 @@ export default {
       this.currentRequest = newRequestId;
       this.$emit('change-request', newRequestId);
     },
-    flamegraphPath(mode) {
+    flamegraphPath(mode, requestId) {
       return mergeUrlParams(
         { performance_bar: 'flamegraph', stackprof_mode: mode },
-        window.location.href,
+        this.store.findRequest(requestId).fullUrl,
       );
     },
+    isGetRequest(requestId) {
+      return this.store.findRequest(requestId)?.method?.toUpperCase() === 'GET';
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
@@ -192,41 +201,41 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
+        <gl-link class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
           s__('PerformanceBar|Trace')
-        }}</a>
+        }}</gl-link>
       </div>
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
+        <gl-link class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
           s__('PerformanceBar|Download')
-        }}</a>
+        }}</gl-link>
       </div>
       <div
         v-if="currentRequest.details && env === 'development'"
         id="peek-memory-report"
         class="view"
       >
-        <a class="gl-text-blue-200" :href="memoryReportPath">{{
+        <gl-link class="gl-text-blue-200" :href="memoryReportPath">{{
           s__('PerformanceBar|Memory report')
-        }}</a>
+        }}</gl-link>
       </div>
-      <div v-if="currentRequest.details" id="peek-flamegraph" class="view">
+      <div v-if="showFlamegraphButtons" id="peek-flamegraph" class="view">
         <span class="gl-text-white-200">{{ s__('PerformanceBar|Flamegraph with mode:') }}</span>
-        <a class="gl-text-blue-200" :href="flamegraphPath('wall')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('wall', currentRequestId)">{{
           s__('PerformanceBar|wall')
-        }}</a>
+        }}</gl-link>
         /
-        <a class="gl-text-blue-200" :href="flamegraphPath('cpu')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('cpu', currentRequestId)">{{
           s__('PerformanceBar|cpu')
-        }}</a>
+        }}</gl-link>
         /
-        <a class="gl-text-blue-200" :href="flamegraphPath('object')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('object', currentRequestId)">{{
           s__('PerformanceBar|object')
-        }}</a>
+        }}</gl-link>
       </div>
-      <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
+      <gl-link v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
-      }}</a>
+      }}</gl-link>
       <request-selector
         v-if="currentRequest"
         :current-request="currentRequest"
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 84fe14fe056..7d4b582f681 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -32,6 +32,7 @@ const initPerformanceBar = (el) => {
         store,
         env: performanceBarData.env,
         requestId: performanceBarData.requestId,
+        requestMethod: performanceBarData.requestMethod,
         peekUrl: performanceBarData.peekUrl,
         profileUrl: performanceBarData.profileUrl,
         statsUrl: performanceBarData.statsUrl,
@@ -40,7 +41,13 @@ const initPerformanceBar = (el) => {
     mounted() {
       PerformanceBarService.registerInterceptor(this.peekUrl, this.addRequest);
 
-      this.addRequest(this.requestId, window.location.href);
+      this.addRequest(
+        this.requestId,
+        window.location.href,
+        undefined,
+        undefined,
+        this.requestMethod,
+      );
       this.loadRequestDetails(this.requestId);
     },
     beforeDestroy() {
@@ -56,12 +63,12 @@ const initPerformanceBar = (el) => {
           this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      addRequest(requestId, requestUrl, operationName) {
+      addRequest(requestId, requestUrl, operationName, requestParams, methodVerb) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
-        this.store.addRequest(requestId, requestUrl, operationName);
+        this.store.addRequest(requestId, requestUrl, operationName, requestParams, methodVerb);
       },
       loadRequestDetails(requestId) {
         const request = this.store.findRequest(requestId);
@@ -145,6 +152,7 @@ const initPerformanceBar = (el) => {
           store: this.store,
           env: this.env,
           requestId: this.requestId,
+          requestMethod: this.requestMethod,
           peekUrl: this.peekUrl,
           profileUrl: this.profileUrl,
           statsUrl: this.statsUrl,
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index e67143f3ede..3a9788d8ab6 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -14,11 +14,13 @@ export default class PerformanceBarService {
         fireCallback,
         requestId,
         requestUrl,
+        requestParams,
         operationName,
+        methodVerb,
       ] = PerformanceBarService.callbackParams(response, peekUrl);
 
       if (fireCallback) {
-        callback(requestId, requestUrl, operationName);
+        callback(requestId, requestUrl, operationName, requestParams, methodVerb);
       }
 
       return response;
@@ -35,11 +37,14 @@ export default class PerformanceBarService {
   static callbackParams(response, peekUrl) {
     const requestId = response.headers && response.headers['x-request-id'];
     const requestUrl = response.config?.url;
+    const requestParams = response.config?.params;
+    const methodVerb = response.config?.method;
+
     const cachedResponse =
       response.headers && parseBoolean(response.headers['x-gitlab-from-cache']);
     const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse;
     const operationName = response.config?.operationName;
 
-    return [fireCallback, requestId, requestUrl, operationName];
+    return [fireCallback, requestId, requestUrl, requestParams, operationName, methodVerb];
   }
 }
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 2011604534c..71f7e5b42f4 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -1,11 +1,19 @@
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
 export default class PerformanceBarStore {
   constructor() {
     this.requests = [];
   }
 
-  addRequest(requestId, requestUrl, operationName) {
+  addRequest(requestId, requestUrl, operationName, requestParams, methodVerb) {
     if (!this.findRequest(requestId)) {
-      let displayName = PerformanceBarStore.truncateUrl(requestUrl);
+      let displayName = '';
+
+      if (methodVerb) {
+        displayName += `${methodVerb.toUpperCase()} `;
+      }
+
+      displayName += PerformanceBarStore.truncateUrl(requestUrl);
 
       if (operationName) {
         displayName += ` (${operationName})`;
@@ -14,6 +22,8 @@ export default class PerformanceBarStore {
       this.requests.push({
         id: requestId,
         url: requestUrl,
+        fullUrl: mergeUrlParams(requestParams, requestUrl),
+        method: methodVerb,
         details: {},
         displayName,
       });
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index cd0ea84cff4..ad09740583b 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -32,30 +32,12 @@
     }
 
     @media (min-width: map-get($grid-breakpoints, md)) {
-      // The `+11` is to ensure the file header border shows when scrolled -
-      // the bottom of the compare-versions header and the top of the file header
-      --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
-      --top: var(--initial-top);
-
-      position: -webkit-sticky;
       position: sticky;
-      top: var(--top);
+      top: calc(#{$calc-application-header-height} + #{$mr-tabs-height});
       z-index: 120;
 
       &.is-sidebar-moved {
-        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px});
-      }
-
-      .with-system-header & {
-        --top: calc(var(--initial-top) + #{$system-header-height});
-      }
-
-      .with-system-header.with-performance-bar & {
-        --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height});
-      }
-
-      .with-performance-bar & {
-        top: calc(var(--initial-top) + #{$performance-bar-height});
+        top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + 24px);
       }
 
       &::before {
@@ -70,19 +52,11 @@
       }
 
       &.is-commit {
-        top: calc(#{$header-height} + #{$commit-stat-summary-height});
-
-        .with-performance-bar & {
-          top: calc(#{$header-height} + #{$commit-stat-summary-height} + #{$performance-bar-height});
-        }
+        top: calc(#{$calc-application-header-height} + #{$commit-stat-summary-height});
       }
 
       &.is-compare {
-        top: calc(#{$header-height} + #{$compare-branches-sticky-header-height});
-
-        .with-performance-bar & {
-          top: calc(#{$performance-bar-height} + #{$header-height} + #{$compare-branches-sticky-header-height});
-        }
+        top: calc(#{$calc-application-header-height} + #{$compare-branches-sticky-header-height});
       }
     }
 
@@ -99,22 +73,7 @@
   @media (min-width: map-get($grid-breakpoints, md)) {
     &.conflict .file-title,
     &.conflict .file-title-flex-parent {
-      top: $header-height;
-    }
-
-    .with-performance-bar &.conflict .file-title,
-    .with-performance-bar &.conflict .file-title-flex-parent {
-      top: calc(#{$header-height} + #{$performance-bar-height});
-    }
-
-    .with-system-header &.conflict .file-title,
-    .with-system-header &.conflict .file-title-flex-parent {
-      top: calc(#{$header-height} + #{$system-header-height});
-    }
-
-    .with-system-header.with-performance-bar &.conflict .file-title,
-    .with-system-header.with-performance-bar &.conflict .file-title-flex-parent {
-      top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height});
+      top: $calc-application-header-height;
     }
   }
 
@@ -733,13 +692,9 @@ table.code {
 
   @include media-breakpoint-up(sm) {
     @include gl-sticky;
-    top: $header-height;
+    top: $calc-application-header-height;
     z-index: 200;
 
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height});
-    }
-
     &.is-stuck {
       @include gl-py-0;
       border-top: 1px solid $white-dark;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 57ef3ea7b09..b4d4361435d 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -288,16 +288,13 @@
 
 @mixin right-sidebar {
   position: fixed;
-  top: $header-height;
-  // Default value for CSS var must contain a unit
-  // stylelint-disable-next-line length-zero-no-unit
-  bottom: var(--review-bar-height, 0px);
+  top: $calc-application-header-height;
+  bottom: calc(#{$calc-application-footer-height} + var(--mr-review-bar-height));
   right: 0;
   transition: width $gl-transition-duration-medium;
   background-color: $white;
   z-index: 200;
   overflow: hidden;
-
 }
 
 .right-sidebar {
@@ -469,28 +466,14 @@
           padding: 0;
 
           .issuable-context-form {
-            --initial-top: calc(#{$header-height} + 76px);
-            --top: var(--initial-top);
-
-            @include gl-sticky;
-            @include gl-overflow-auto;
+            $issue-sticky-header-height: 76px;
 
-            top: var(--top);
-            height: calc(100vh - var(--top));
+            top: calc(#{$calc-application-header-height} + #{$issue-sticky-header-height});
+            height: calc(#{$calc-application-viewport-height} - #{$issue-sticky-header-height} - var(--mr-review-bar-height));
+            position: sticky;
+            overflow: auto;
             padding: 0 15px;
-            margin-bottom: calc(var(--top) * -1);
-
-            .with-performance-bar & {
-              --top: calc(var(--initial-top) + #{$performance-bar-height});
-            }
-
-            .with-system-header & {
-              --top: calc(var(--initial-top) + #{$system-header-height});
-            }
-
-            .with-performance-bar.with-system-header & {
-              --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height});
-            }
+            margin-bottom: calc((#{$header-height} + $issue-sticky-header-height) * -1);
           }
         }
       }
@@ -742,10 +725,6 @@
   }
 }
 
-.with-performance-bar .right-sidebar {
-  top: calc(#{$header-height} + #{$performance-bar-height});
-}
-
 .issuable-show-labels {
   .gl-label {
     margin-bottom: 5px;
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index 5f2aa86ad16..a60ea589409 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -46,9 +46,7 @@
   }
 
   // left sidebar eg: project page
-  // right sidebar eg: MR page
-  .nav-sidebar,
-  .right-sidebar {
+  .nav-sidebar {
     top: calc(#{$system-header-height} + #{$header-height});
   }
 
@@ -62,9 +60,7 @@
     }
 
     // left sidebar eg: project page
-    // right sidebar eg: MR page
-    .nav-sidebar,
-    .right-sidebar {
+    .nav-sidebar {
       top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height});
     }
   }
@@ -73,10 +69,7 @@
 // System Footer
 .with-system-footer {
   // left sidebar eg: project page
-  // right sidebar eg: mr page
   .nav-sidebar,
-  .right-sidebar,
-  .review-bar-component,
   // navless pages' footer eg: login page
   // navless pages' footer border eg: login page
   &.devise-layout-html body .footer-container,
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 3a4ac4257b6..00759ef3710 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -255,21 +255,19 @@ $tabs-holder-z-index: 250;
   // If they don't match, the file tree and the diff files stick
   // to the top at different heights, which is a bad-looking defect
   $diff-file-header-top: 11px;
-  --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
-  --top-pos: var(--initial-pos);
 
-  position: -webkit-sticky;
   position: sticky;
-  top: calc(var(--top-pos) + var(--performance-bar-height, 0px));
+  top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
   min-height: 300px;
-  height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--mr-review-bar-height, 0px));
+  height: calc(#{$calc-application-viewport-height} - (#{$mr-tabs-height} + #{$diff-file-header-top}));
 
   .drag-handle {
     bottom: 16px;
   }
 
   &.is-sidebar-moved {
-    --top-pos: calc(var(--initial-pos) + 26px);
+    height: calc(#{$calc-application-viewport-height} - (#{$mr-tabs-height} + #{$diff-file-header-top} + 26px));
+    top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top} + 26px);
   }
 }
 
@@ -1138,7 +1136,7 @@ $tabs-holder-z-index: 250;
 
 .review-bar-component {
   position: fixed;
-  bottom: 0;
+  bottom: $calc-application-footer-height;
   left: 0;
   z-index: $zindex-dropdown-menu;
   display: flex;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index d72dcde8f11..efbe42fdb7f 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -252,7 +252,7 @@ ul.related-merge-requests > li gl-emoji {
 
   @include gl-left-0;
   width: var(--width);
-  top: $header-height;
+  top: $calc-application-header-height;
 
   // collapsed right sidebar
   @include media-breakpoint-up(sm) {
@@ -266,10 +266,6 @@ ul.related-merge-requests > li gl-emoji {
   }
 }
 
-.with-performance-bar .issue-sticky-header {
-  top: calc(#{$header-height} + #{$performance-bar-height});
-}
-
 @include media-breakpoint-up(md) {
   // collapsed left sidebar + collapsed right sidebar
   .page-with-contextual-sidebar .issue-sticky-header {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 5b8b850ba35..0a17b2c47a4 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -209,19 +209,11 @@ $comparison-empty-state-height: 62px;
 }
 
 .merge-request-tabs-holder {
-  top: $header-height;
+  top: $calc-application-header-height;
   z-index: $tabs-holder-z-index;
   background-color: $body-bg;
   border-bottom: 1px solid $border-color;
 
-  .with-system-header & {
-    top: calc(#{$header-height} + #{$system-header-height});
-  }
-
-  .with-system-header.with-performance-bar & {
-    top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height});
-  }
-
   @include media-breakpoint-up(md) {
     position: sticky;
   }
@@ -240,12 +232,6 @@ $comparison-empty-state-height: 62px;
   }
 }
 
-.with-performance-bar {
-  .merge-request-tabs-holder {
-    top: calc(#{$header-height} + #{$performance-bar-height});
-  }
-}
-
 .limit-container-width {
   .merge-request-tabs-container {
     max-width: $limited-layout-width;
@@ -336,11 +322,7 @@ $comparison-empty-state-height: 62px;
 
 .mr-compare {
   .diff-file .file-title-flex-parent {
-    top: calc(#{$header-height} + #{$mr-tabs-height});
-
-    .with-performance-bar & {
-      top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height});
-    }
+    top: calc(#{$calc-application-header-height} + #{$mr-tabs-height});
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 45f9729e785..b31ee069236 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -500,18 +500,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     border-radius: 0;
     margin-left: 2.5rem;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
-
-      &.is-sidebar-moved {
-        --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 24px});
-      }
-
-      .with-performance-bar & {
-        --top: 123px;
-      }
-    }
-
     &:hover {
       background-color: $gray-light;
     }
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 65cae126795..c59a4820b79 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -623,6 +623,7 @@ html {
   --performance-bar-height: 0px;
   --system-header-height: 0px;
   --system-footer-height: 0px;
+  --mr-review-bar-height: 0px;
 }
 .gl-font-sm {
   font-size: 12px;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index c5d9721d93c..1771afc0150 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -623,6 +623,7 @@ html {
   --performance-bar-height: 0px;
   --system-header-height: 0px;
   --system-footer-height: 0px;
+  --mr-review-bar-height: 0px;
 }
 .gl-font-sm {
   font-size: 12px;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index d366649916d..8bb58c77879 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -668,6 +668,12 @@ body.navless {
 .btn-block.btn {
   padding: 6px 0;
 }
+:root {
+  --performance-bar-height: 0px;
+  --system-header-height: 0px;
+  --system-footer-height: 0px;
+  --mr-review-bar-height: 0px;
+}
 .tab-content {
   overflow: visible;
 }