Merge branch 'blob-refactor-ui' into 'master'

Blob refactor: Fix cosmetic issues

See merge request gitlab-org/gitlab!79416

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -245,7 +245,7 @@ export default {
 <template>
   <div>
     <gl-loading-icon v-if="isLoading" size="sm" />
-    <div v-if="blobInfo && !isLoading" class="file-holder">
+    <div v-if="blobInfo && !isLoading" class="file-holder gl-overflow-hidden">
       <blob-header
         :blob="blobInfo"
         :hide-viewer-switcher="!hasRichViewer || isBinaryFileType || isUsingLfs"

app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue

@@ -51,7 +51,7 @@ export default {
 <template>
   <div>
     <div class="file-content code js-syntax-highlight" :class="$options.userColorScheme">
-      <div v-if="!hideLineNumbers" class="line-numbers">
+      <div v-if="!hideLineNumbers" class="line-numbers gl-pt-0!">
         <a
           v-for="line in lineNumbers"
           :id="`L${line}`"
@@ -67,7 +67,7 @@ export default {
       </div>
       <div class="blob-content">
         <pre
-          class="code highlight"
+          class="code highlight gl-p-0! gl-display-flex"
         ><code v-safe-html="content" :data-blob-hash="blobHash"></code></pre>
       </div>
     </div>

app/assets/javascripts/vue_shared/components/source_viewer.vue

@@ -116,13 +116,13 @@ export default {
 </script>
 <template>
   <div
-    class="file-content code js-syntax-highlight blob-content"
+    class="file-content code js-syntax-highlight blob-content gl-display-flex"
     :class="$options.userColorScheme"
     data-type="simple"
     data-qa-selector="blob_viewer_file_content"
   >
     <line-numbers :lines="lineNumbers" />
-    <pre class="code"><code v-safe-html="highlightedContent"></code>
+    <pre class="code gl-pb-0!"><code v-safe-html="highlightedContent"></code>
     </pre>
   </div>
 </template>

spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap

@@ -6,7 +6,7 @@ exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
     class="file-content code js-syntax-highlight"
   >
     <div
-      class="line-numbers"
+      class="line-numbers gl-pt-0!"
     >
       <a
         class="diff-line-num js-line-number"
@@ -56,7 +56,7 @@ exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
       class="blob-content"
     >
       <pre
-        class="code highlight"
+        class="code highlight gl-p-0! gl-display-flex"
       >
         <code
           data-blob-hash="foo-bar"