1 files changed, 18 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index f99edced361..c74a4b47fcb 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -161,6 +161,9 @@ export default {
     manuallyCollapsed() {
       return collapsedType(this.file) === DIFF_FILE_MANUAL_COLLAPSE;
     },
+    forcedOpen() {
+      return this.file.viewer.forceOpen;
+    },
     showBody() {
       return !this.isCollapsed || this.automaticallyCollapsed;
     },
@@ -174,6 +177,10 @@ export default {
       return Boolean(gon.current_user_id);
     },
     isCollapsed() {
+      if (this.forcedOpen) {
+        return false;
+      }
+
       if (collapsedType(this.file) !== DIFF_FILE_MANUAL_COLLAPSE) {
         return this.viewDiffsFileByFile ? false : this.file.viewer?.automaticallyCollapsed;
       }
@@ -201,6 +208,11 @@ export default {
         this.manageViewedEffects();
       },
     },
+    'file.viewer.forceOpen': {
+      handler: function fileForcedOpenHandler() {
+        this.handleToggle();
+      },
+    },
     'file.file_hash': {
       handler: function hashChangeWatch(newHash, oldHash) {
         if (
@@ -390,23 +402,23 @@ export default {
 
     <div
       v-if="idState.forkMessageVisible"
-      class="js-file-fork-suggestion-section file-fork-suggestion"
+      class="js-file-fork-suggestion-section file-fork-suggestion gl-border-1 gl-border-solid gl-border-gray-100 gl-border-top-0"
     >
       <span v-safe-html="forkMessage" class="file-fork-suggestion-note"></span>
       <gl-button
         :href="file.fork_path"
-        class="js-fork-suggestion-button"
+        class="js-fork-suggestion-button gl-mr-3"
         category="secondary"
         variant="confirm"
         >{{ $options.i18n.fork }}</gl-button
       >
-      <button
-        class="js-cancel-fork-suggestion-button btn btn-grouped"
-        type="button"
+      <gl-button
+        class="js-cancel-fork-suggestion-button"
+        category="secondary"
         @click="hideForkMessage"
       >
         {{ $options.i18n.cancel }}
-      </button>
+      </gl-button>
     </div>
     <template v-else>
       <div