Add latest changes from gitlab-org/gitlab@15-11-stable-eev15.11.0-rc42

14 files changed, 475 insertions, 150 deletions

diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 99e7f7ae0a4..f7ab78c1bcc 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -208,15 +208,11 @@
 }
 
 .boards-sidebar {
-  top: $header-height !important;
+  top: $calc-application-header-height !important;
   height: auto;
-  bottom: 0;
+  bottom: $calc-application-footer-height;
   padding-bottom: 0.5rem;
 
-  .with-performance-bar & {
-    top: calc(#{$header-height} + #{$performance-bar-height}) !important;
-  }
-
   .sidebar-collapsed-icon {
     @include gl-display-none;
   }
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/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
index 143682e1cd7..f56eb4ae6fb 100644
--- a/app/assets/stylesheets/page_bundles/design_management.scss
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -20,10 +20,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
 
 .design-detail {
   background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-
-  .with-performance-bar & {
-    top: 35px;
-  }
+  bottom: $calc-application-footer-height;
 
   .comment-indicator {
     border-radius: 50%;
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 79595fa3a98..e0fb95a1359 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -66,7 +66,7 @@
 
   .title {
     padding: 0;
-    margin-bottom: $gl-padding;
+    margin-bottom: $gl-spacing-scale-4;
     border-bottom: 0;
     word-wrap: break-word;
     overflow-wrap: break-word;
diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss
index b08e129a805..1ca0c5e7ce6 100644
--- a/app/assets/stylesheets/page_bundles/issuable_list.scss
+++ b/app/assets/stylesheets/page_bundles/issuable_list.scss
@@ -18,6 +18,11 @@
       }
     }
 
+    .issuable-info,
+    .issuable-meta {
+      font-size: $gl-font-size-sm;
+    }
+
     .issuable-meta {
       display: flex;
       flex-direction: column;
diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss
new file mode 100644
index 00000000000..495b7d58788
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/login.scss
@@ -0,0 +1,290 @@
+@import 'mixins_and_variables_and_functions';
+
+/* Login Page */
+.login-page {
+  .container {
+    max-width: 960px;
+  }
+
+  .navbar-gitlab .container {
+    max-width: none;
+  }
+
+  .flash-container {
+    margin-bottom: $gl-padding;
+    position: relative;
+    top: 8px;
+  }
+
+  .brand-holder {
+    font-size: 18px;
+    line-height: 1.5;
+
+    p {
+      font-size: 16px;
+      color: $login-brand-holder-color;
+    }
+
+    h3 {
+      font-size: 22px;
+    }
+
+    img {
+      max-width: 100%;
+      margin-bottom: 30px;
+    }
+
+    a {
+      font-weight: $gl-font-weight-bold;
+    }
+  }
+
+  p {
+    font-size: 13px;
+  }
+
+  .signin-text {
+    p {
+      margin-bottom: 0;
+      line-height: 1.5;
+    }
+  }
+
+  .borderless {
+    .login-box,
+    .omniauth-container {
+      box-shadow: none;
+    }
+
+    .g-recaptcha {
+      > div {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  .login-box,
+  .omniauth-container {
+    box-shadow: 0 0 0 1px $border-color;
+    border-radius: $border-radius;
+
+    .login-heading h3 {
+      font-weight: $gl-font-weight-normal;
+      line-height: 1.5;
+      margin: 0 0 10px;
+    }
+
+    .login-footer {
+      margin-top: 10px;
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a.forgot {
+      float: right;
+      padding-top: 6px;
+    }
+
+    .nav .active a {
+      background: transparent;
+    }
+
+    // Styles the glowing border of focused input for username async validation
+    .login-body {
+      font-size: 13px;
+
+      input + p,
+      input ~ p.field-validation {
+        margin-top: 5px;
+      }
+
+      .username .validation-success {
+        color: $green-600;
+      }
+
+      .username .validation-error {
+        color: $red-500;
+      }
+    }
+  }
+
+  .omniauth-container {
+    border-radius: $border-radius;
+    font-size: 13px;
+
+    p {
+      margin: 0;
+    }
+
+    form {
+      padding: 0;
+      border: 0;
+      background: none;
+    }
+  }
+
+  .new-session-tabs {
+    &.nav-links-unboxed {
+      border-color: transparent;
+      box-shadow: none;
+
+      .nav-item {
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 1px solid $gray-100;
+        background-color: transparent;
+      }
+    }
+
+    display: flex;
+    box-shadow: 0 0 0 1px $border-color;
+    border-top-right-radius: $border-radius-default;
+    border-top-left-radius: $border-radius-default;
+
+    // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
+    // These styles prevent this from breaking the layout, and only applied when providers are configured.
+    &.custom-provider-tabs {
+      flex-wrap: wrap;
+
+      li {
+        min-width: 85px;
+        flex-basis: auto;
+
+        // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
+        // We are making somewhat of an assumption about the configuration here: that users do not have more than
+        // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
+        // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
+        // above one of the bottom row elements. If you know a better way, please implement it!
+        &:nth-child(n+5) {
+          border-top: 1px solid $border-color;
+        }
+      }
+
+      a {
+        font-size: 16px;
+      }
+    }
+
+    li {
+      flex: 1;
+      text-align: center;
+      border-left: 1px solid $border-color;
+
+      &:first-of-type {
+        border-left: 0;
+        border-top-left-radius: $border-radius-default;
+      }
+
+      &:last-of-type {
+        border-top-right-radius: $border-radius-default;
+      }
+
+      &:not(.active) {
+        background-color: $gray-light;
+      }
+
+      a {
+        width: 100%;
+        font-size: 18px;
+      }
+
+      &.active > a {
+        cursor: default;
+      }
+    }
+  }
+
+  .form-control {
+    &:active,
+    &:focus {
+      background-color: $white;
+    }
+  }
+
+  .submit-container {
+    margin-top: 16px;
+  }
+
+  input[type='submit'] {
+    margin-bottom: 0;
+    display: block;
+    width: 100%;
+  }
+
+  .devise-errors {
+    h2 {
+      margin-top: 0;
+      font-size: 14px;
+      color: $red-700;
+    }
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .login-page {
+    .col-md-5.float-right {
+      float: none !important;
+      margin-bottom: 45px;
+    }
+  }
+}
+
+.devise-layout-html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+
+  &.with-system-header {
+    .login-page-broadcast {
+      margin-top: calc(#{$system-header-height} + #{$header-height});
+    }
+  }
+
+  // Fixes footer container to bottom of viewport
+  body {
+    // offset height of fixed header + 1 to avoid scroll
+    height: calc(100% - 51px);
+
+    // offset without the header
+    &.navless {
+      height: calc(100% - 11px);
+    }
+
+    margin: 0;
+    padding: 0;
+
+    .page-wrap {
+      min-height: 100%;
+      position: relative;
+    }
+
+    .footer-container,
+    hr.footer-fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40px;
+      background: $white;
+    }
+
+    .login-page-broadcast {
+      margin-top: 40px;
+    }
+
+    .navless-container {
+      padding: 0 15px 65px; // height of footer + bottom padding of email confirmation link
+    }
+
+    .flash-container {
+      padding-bottom: 65px;
+
+      @include media-breakpoint-down(xs) {
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 396c590d912..97df87458ab 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1,6 +1,5 @@
 @import 'mixins_and_variables_and_functions';
 
-$mr-review-bar-height: calc(2rem + 13px);
 $mr-widget-margin-left: 40px;
 $mr-widget-min-height: 69px;
 $tabs-holder-z-index: 250;
@@ -181,6 +180,10 @@ $tabs-holder-z-index: 250;
     .content + .content {
       @include gl-border-t;
     }
+
+    .notes-content {
+      border: 0;
+    }
   }
 
   &.inline-diff-view {
@@ -242,18 +245,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.with-system-header {
-  --system-header-height: #{$system-header-height};
-}
-
-.with-performance-bar {
-  --performance-bar-height: #{$performance-bar-height};
-}
-
-.review-bar-visible {
-  --review-bar-height: #{$mr-review-bar-height};
-}
-
 .diff-tree-list {
   // This 11px value should match the additional value found in
   //      /assets/stylesheets/framework/diffs.scss
@@ -264,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(--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);
   }
 }
 
@@ -915,15 +904,6 @@ $tabs-holder-z-index: 250;
   &:not(:first-child) {
     margin-top: $gl-padding;
   }
-
-  &:not(:last-child)::before {
-    content: '';
-    border-left: 2px solid var(--border-color, $border-color);
-    position: absolute;
-    bottom: -17px;
-    left: 26px;
-    height: 16px;
-  }
 }
 
 .mr-version-controls {
@@ -992,8 +972,8 @@ $tabs-holder-z-index: 250;
 .merge-request-overview {
   @include media-breakpoint-up(lg) {
     display: grid;
-    grid-template-columns: calc(95% - 285px) auto;
-    grid-gap: 5%;
+    grid-template-columns: calc(97% - 285px) auto;
+    grid-gap: 3%;
   }
 }
 
@@ -1156,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;
@@ -1241,3 +1221,70 @@ $tabs-holder-z-index: 250;
     }
   }
 }
+
+.mr-state-loader {
+  svg {
+    vertical-align: middle;
+  }
+
+  .gl-skeleton-loader {
+    max-width: 334px;
+  }
+}
+
+.mr-system-note-icon {
+  width: 20px;
+  height: 20px;
+  margin-left: 6px;
+
+  &.gl-bg-green-100 {
+    --bg-color: var(--green-100, #{$green-100});
+  }
+
+  &.gl-bg-red-100 {
+    --bg-color: var(--red-100, #{$red-100});
+  }
+
+  &.gl-bg-blue-100 {
+    --bg-color: var(--blue-100, #{$blue-100});
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  bottom: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, transparent, var(--bg-color));
+
+  .system-note:first-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  top: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, var(--bg-color), transparent);
+
+  .system-note:last-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-empty {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  margin-left: 12px;
+  margin-right: 8px;
+  border: 2px solid var(--gray-50, $gray-50);
+}
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 708d1a2895e..8dc07715989 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -131,42 +131,6 @@
   }
 }
 
-.milestone-page-header {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .milestone-buttons {
-    margin-left: auto;
-    order: 2;
-
-    .verbose {
-      display: none;
-    }
-  }
-
-  .header-text-content {
-    order: 3;
-    width: 100%;
-  }
-
-  @include media-breakpoint-up(xs) {
-    .milestone-buttons .verbose {
-      display: inline;
-    }
-
-    .header-text-content {
-      order: 2;
-      width: auto;
-    }
-
-    .milestone-buttons {
-      order: 3;
-    }
-  }
-}
-
 .issuable-row {
   background-color: var(--white, $white);
 }
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index f08d6e3ca95..51bffd99dd0 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -57,10 +57,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-x-auto;
-  @include gl-border-gray-100;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-rounded-base;
 }
 
 .timeline-section {
@@ -68,15 +64,12 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
   @include gl-top-0;
   z-index: 20;
 
-  .timeline-header-blank,
+  .timeline-header-label,
   .timeline-header-item {
     @include gl-float-left;
-    height: $header-item-height;
-    border-bottom: $border-style;
-    background-color: var(--white, $white);
   }
 
-  .timeline-header-blank {
+  .timeline-header-label {
     @include gl-sticky;
     @include gl-top-0;
     @include gl-left-0;
@@ -85,13 +78,8 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
   }
 
   .timeline-header-item {
-    &:last-of-type .item-label {
-      @include gl-border-r-0;
-    }
-
-    .item-label,
     .item-sublabel .sublabel-value {
-      color: var(--gray-400, $gray-400);
+      color: var(--gray-700, $gray-700);
       @include gl-font-weight-normal;
 
       &.label-dark {
@@ -103,11 +91,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
       }
     }
 
-    .item-label {
-      border-right: $border-style;
-      border-bottom: $border-style;
-    }
-
     .item-sublabel {
       @include gl-relative;
       @include gl-display-flex;
@@ -118,7 +101,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
 
         text-align: center;
         @include gl-font-base;
-        padding: 2px 0;
       }
     }
 
@@ -131,10 +113,15 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
       @include gl-rounded-full;
       transform: translate(-50%, 50%);
     }
+
+    &:first-of-type {
+      .week-item-sublabel .sublabel-value:nth-of-type(7) {
+        @include gl-border-r;
+      }
+    }
   }
 }
 
-.timeline-section .timeline-header-blank,
 .list-section .details-cell {
   &::after {
     @include gl-h-full;
@@ -159,7 +146,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
   @include gl-left-0;
   width: $details-cell-width;
   @include gl-font-base;
-  background-color: var(--white, $white);
   z-index: 10;
 }
 
@@ -182,3 +168,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
     transform: translateX(-50%);
   }
 }
+
+.rotation-asignee-container {
+  overflow-x: clip;
+}
diff --git a/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss
new file mode 100644
index 00000000000..8f2cbc402c9
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss
@@ -0,0 +1,19 @@
+@import 'mixins_and_variables_and_functions';
+
+.storage-type-usage {
+  &:first-child {
+    @include gl-rounded-top-left-base;
+    @include gl-rounded-bottom-left-base;
+  }
+
+  &:last-child {
+    @include gl-rounded-top-right-base;
+    @include gl-rounded-bottom-right-base;
+  }
+
+  &:not(:last-child) {
+    @include gl-border-r-2;
+    @include gl-border-r-solid;
+    border-right-color: var(--white, $white);
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/releases.scss b/app/assets/stylesheets/page_bundles/releases.scss
index 24ffbf9b90c..c011ec3fe4c 100644
--- a/app/assets/stylesheets/page_bundles/releases.scss
+++ b/app/assets/stylesheets/page_bundles/releases.scss
@@ -10,3 +10,17 @@
     min-height: 46px;
   }
 }
+
+.release-tag-selector {
+  .popover-body {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    min-width: $gl-dropdown-width;
+    max-width: $gl-dropdown-width;
+  }
+
+  .release-tag-list {
+    max-height: $dropdown-max-height;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index cde570cfb0f..d37e87b5cd5 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -21,18 +21,18 @@ $border-radius-medium: 3px;
   }
 }
 
+.language-filter-checkbox {
+  .custom-control-label {
+    flex-grow: 1;
+  }
+}
+
 .search-sidebar {
   @include media-breakpoint-up(md) {
     min-width: $search-sidebar-min-width;
     max-width: $search-sidebar-max-width;
   }
 
-  .language-filter-checkbox {
-    .custom-control-label {
-      flex-grow: 1;
-    }
-  }
-
   .language-filter-max-height {
     max-height: $language-filter-max-height;
   }
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index d7d454bde45..69a3ec94fda 100644
--- a/app/assets/stylesheets/page_bundles/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -102,24 +102,42 @@
     }
   }
 
-  .active > a {
-    color: var(--black, $black);
-  }
-
   .active > .wiki-list {
     a,
     .wiki-list-expand-button,
     .wiki-list-collapse-button {
-      color: var(--black, $black);
+      color: $black;
+    }
+  }
+
+  .wiki-list {
+    height: $gl-spacing-scale-8;
+
+    &:hover {
+      background: $gray-10;
+
+      .wiki-list-create-child-button {
+        display: block;
+        box-shadow: none;
+
+        &:focus {
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400;
+        }
+
+        &:active {
+          background: $gray-100 !important;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400;
+        }
+      }
     }
   }
 
   .wiki-list-expand-button,
   .wiki-list-collapse-button {
-    color: var(--gray-400, $gray-400);
+    color: $gray-400;
 
     &:hover {
-      color: var(--black, $black);
+      color: $black;
     }
   }
 
@@ -130,10 +148,6 @@
     margin: 0;
   }
 
-  ul.wiki-pages li {
-    margin: 5px 0 10px;
-  }
-
   ul.wiki-pages ul {
     padding-left: 20px;
   }
@@ -172,6 +186,10 @@ ul.wiki-pages-list.content-list {
 }
 
 .wiki-list {
+  .wiki-list-create-child-button {
+    display: none;
+  }
+
   .wiki-list-expand-button,
   .wiki-list-collapse-button {
     left: -$gl-spacing-scale-5;
@@ -198,17 +216,12 @@ ul.wiki-pages-list.content-list {
 
 .drawio-editor {
   position: fixed;
-  top: calc(var(--header-height, 48px));
+  top: 0;
   left: 0;
   bottom: 0;
-  width: 100%;
-  height: calc(100% - var(--header-height, 48px));
+  width: 100vw;
+  height: 100vh;
   border: 0;
   z-index: 1100;
   visibility: hidden;
 }
-
-.with-performance-bar .drawio-editor {
-  top: calc(var(--header-height, 48px) + 35px);
-  height: calc(100% - var(--header-height, 48px) - 35px);
-}
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 00c86c46ac8..ecbb872e1df 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -87,22 +87,20 @@
   }
 }
 
-.work-item-link-child {
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-transparent;
-  @include gl-rounded-base;
-
-  &:hover,
-  &:focus-within {
-    @include gl-bg-white;
-    @include gl-border-gray-50;
-  }
-}
-
 // sticky error placement for errors in modals , by default it is 83px for full view
 #work-item-detail-modal {
   .flash-container.flash-container-page.sticky {
     top: -8px;
   }
 }
+
+
+.work-item-notifications-form {
+  .gl-toggle {
+    @include gl-ml-auto;
+  }
+
+  .gl-toggle-label {
+    @include gl-font-weight-normal;
+  }
+}