From 98949a13b03ca8602fa019e50eb48119e126ab23 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 27 Aug 2019 19:30:21 +0000
Subject: Round the file title; Add top border to conflict diffs

The file title sometimes overflows its container, which has the same
border-radius. By always rounding the file title, the overflow never
happens, so the corners always look correct.

Everywhere else there are file diffs, there is a top border to complete
the full border around the file.
---
 app/assets/stylesheets/pages/diff.scss             | 28 ++++++++++++++++++++++
 ...icts-file-headers-bad-positioning-on-scroll.yml |  5 ++++
 2 files changed, 33 insertions(+)
 create mode 100644 changelogs/unreleased/60141-mr-resolve-conflicts-file-headers-bad-positioning-on-scroll.yml

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 77a2fd6b876..defa1a6c0d5 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -2,8 +2,14 @@
 .diff-file {
   margin-bottom: $gl-padding;
 
+  &.conflict {
+    border-top: 1px solid $border-color;
+  }
+
   .file-title,
   .file-title-flex-parent {
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
     cursor: pointer;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
@@ -67,6 +73,28 @@
     }
   }
 
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    &.conflict .file-title,
+    &.conflict .file-title-flex-parent {
+      top: $header-height;
+    }
+
+    .with-performance-bar &.conflict .file-title,
+    .with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height;
+    }
+
+    .with-system-header &.conflict .file-title,
+    .with-system-header &.conflict .file-title-flex-parent {
+      top: $header-height + $system-header-height;
+    }
+
+    .with-system-header.with-performance-bar &.conflict .file-title,
+    .with-system-header.with-performance-bar &.conflict .file-title-flex-parent {
+      top: $header-height + $performance-bar-height + $system-header-height;
+    }
+  }
+
   .diff-content {
     background: $white-light;
     color: $gl-text-color;
diff --git a/changelogs/unreleased/60141-mr-resolve-conflicts-file-headers-bad-positioning-on-scroll.yml b/changelogs/unreleased/60141-mr-resolve-conflicts-file-headers-bad-positioning-on-scroll.yml
new file mode 100644
index 00000000000..b6d6d596de9
--- /dev/null
+++ b/changelogs/unreleased/60141-mr-resolve-conflicts-file-headers-bad-positioning-on-scroll.yml
@@ -0,0 +1,5 @@
+---
+title: Fix file header style and position during scroll in a merge conflict resolution
+merge_request: 31991
+author:
+type: fixed
-- 
cgit v1.2.1