Merge branch '39290-fix-border-of-readme-when-vue_file_list-enabled' into 'master'

Fix top border of README in vue_file_list

Closes #39290

See merge request gitlab-org/gitlab!21578

app/assets/javascripts/repository/components/preview/index.vue

@@ -35,11 +35,13 @@ export default {
 
 <template>
   <article class="file-holder limited-width-container readme-holder">
-    <div class="file-title">
-      <i aria-hidden="true" class="fa fa-file-text-o fa-fw"></i>
-      <gl-link :href="blob.webUrl">
-        <strong>{{ blob.name }}</strong>
-      </gl-link>
+    <div class="js-file-title file-title-flex-parent">
+      <div class="file-header-content">
+        <i aria-hidden="true" class="fa fa-file-text-o fa-fw"></i>
+        <gl-link :href="blob.webUrl">
+          <strong>{{ blob.name }}</strong>
+        </gl-link>
+      </div>
     </div>
     <div class="blob-viewer">
       <gl-loading-icon v-if="loading > 0" size="md" class="my-4 mx-auto" />

changelogs/unreleased/39290-fix-border-of-readme-when-vue_file_list-enabled.yml

+---
+title: Fix top border of README in vue_file_list
+merge_request: 21578
+author: Hector Bustillos
+type: fixed

spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap

@@ -5,20 +5,24 @@ exports[`Repository file preview component renders file HTML 1`] = `
   class="file-holder limited-width-container readme-holder"
 >
   <div
-    class="file-title"
+    class="js-file-title file-title-flex-parent"
   >
-    <i
-      aria-hidden="true"
-      class="fa fa-file-text-o fa-fw"
-    />
-     
-    <gllink-stub
-      href="http://test.com"
+    <div
+      class="file-header-content"
     >
-      <strong>
-        README.md
-      </strong>
-    </gllink-stub>
+      <i
+        aria-hidden="true"
+        class="fa fa-file-text-o fa-fw"
+      />
+       
+      <gllink-stub
+        href="http://test.com"
+      >
+        <strong>
+          README.md
+        </strong>
+      </gllink-stub>
+    </div>
   </div>
    
   <div