Merge branch 'jswain_whats_new_notification_dot_safari' into 'master'

Fix "What's New" notification dot for Safari

See merge request gitlab-org/gitlab!75293

app/assets/stylesheets/framework/header.scss

@@ -523,9 +523,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   background-color: $orange-300;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 
 .with-notifications .notification-dot {

app/assets/stylesheets/startup/startup-dark.scss

@@ -912,9 +912,9 @@ input {
   background-color: #9e5400;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1953,6 +1953,9 @@ body.gl-dark {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -893,9 +893,9 @@ input {
   background-color: #d99530;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1631,6 +1631,9 @@ svg.s16 {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }

app/views/layouts/header/_default.html.haml

@@ -94,7 +94,7 @@
                 %span.badge.badge-pill.todos-count.js-todos-count{ class: ('hidden' if todos_pending_count == 0) }
                   = todos_count_format(todos_pending_count)
           %li.nav-item.header-help.dropdown.d-none.d-md-block{ **tracking_attrs('main_navigation', 'click_question_mark_link', 'navigation') }
-            = link_to help_path, class: 'header-help-dropdown-toggle', data: { toggle: "dropdown" } do
+            = link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown" } do
               %span.gl-sr-only
                 = s_('Nav|Help')
               = sprite_icon('question-o')

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -912,9 +912,9 @@ input {
   background-color: #9e5400;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1953,6 +1953,9 @@ body.gl-dark {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -893,9 +893,9 @@ input {
   background-color: #d99530;
   height: 12px;
   width: 12px;
-  margin-top: -15px;
   pointer-events: none;
   visibility: hidden;
+  top: 3px;
 }
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
@@ -1631,6 +1631,9 @@ svg.s16 {
     display: block;
   }
 }
+.gl-relative {
+  position: relative;
+}
 .gl-absolute {
   position: absolute;
 }