Use bootstrap utils

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -70,10 +70,10 @@ export default {
   >
     <div id="merge-requests" class="card card-slim mt-3">
       <div class="card-header">
-        <div class="card-title mt-0 mb-0 h5 merge-requests-title">
+        <div class="card-title mt-0 mb-0 h5 merge-requests-title position-relative">
           <a
             id="user-content-related-merge-requests"
-            class="anchor"
+            class="anchor position-absolute text-decoration-none"
             href="#related-merge-requests"
             aria-hidden="true"
           ></a>

app/assets/stylesheets/pages/issues.scss

@@ -286,24 +286,20 @@ ul.related-merge-requests > li {
 }
 
 .issue-details {
-  .card-title, {
-    position: relative;
-
+  .card-title {
     a.anchor {
       left: -16px;
       top: 4px;
-      position: absolute;
-      text-decoration: none;
       outline: none;
 
       &::after {
         content: image-url('icon_anchor.svg');
-        visibility: hidden;
+        @include invisible(hidden);
       }
     }
 
     &:hover > a.anchor::after {
-      visibility: visible;
+      @include invisible(visible);
     }
   }
 }

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -117,10 +117,10 @@ export default {
   <div id="related-issues" class="related-issues-block">
     <div class="card card-slim">
       <div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
-        <h3 class="card-title mt-0 mb-0 h5">
+        <h3 class="card-title mt-0 mb-0 h5 position-relative">
           <a
             id="user-content-related-issues"
-            class="anchor"
+            class="anchor position-absolute text-decoration-none"
             href="#related-issues"
             aria-hidden="true"
           ></a>