1 files changed, 8 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 1b8e4bcfec6..c30ca5369ee 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -36,6 +36,9 @@ export default {
 
       return content;
     },
+    firstLineClass() {
+      return { 'gl-mt-3!': this.number === 1 };
+    },
   },
   methods: {
     wrapBidiChar(bidiChar) {
@@ -56,10 +59,11 @@ export default {
 </script>
 <template>
   <div class="gl-display-flex">
-    <div class="line-numbers gl-pt-0! gl-pb-0! gl-absolute gl-z-index-3">
+    <div class="gl-p-0! gl-absolute gl-z-index-3 gl-border-r diff-line-num line-numbers">
       <gl-link
         :id="`L${number}`"
-        class="file-line-num diff-line-num gl-user-select-none"
+        class="gl-user-select-none gl-ml-5 gl-pr-3 gl-shadow-none! file-line-num diff-line-num"
+        :class="firstLineClass"
         :to="`#L${number}`"
         :data-line-number="number"
       >
@@ -68,7 +72,8 @@ export default {
     </div>
 
     <pre
-      class="code highlight gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11!"
+      class="gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11! gl-border-none! code highlight"
+      :class="firstLineClass"
     ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre>
   </div>
 </template>