From 2198049cbde55dd2c5af257e1cc59bc1d30ff814 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Wed, 15 Mar 2023 17:50:19 +0100
Subject: [PATCH] Improve sticky diffs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix page position after long sticky diffs are collapsed

Committed-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
---
 gradle/changelog/sticky_diffs.yaml            |  2 +
 .../src/__snapshots__/storyshots.test.ts.snap | 78 +++++++++++++++++++
 .../ui-components/src/repos/LazyDiffFile.tsx  | 18 ++++-
 3 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 gradle/changelog/sticky_diffs.yaml

diff --git a/gradle/changelog/sticky_diffs.yaml b/gradle/changelog/sticky_diffs.yaml
new file mode 100644
index 0000000000..ef9f7faeb5
--- /dev/null
+++ b/gradle/changelog/sticky_diffs.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Fix sticky diffs page position after collapse
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 869b3d1566..8d7e54f337 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -22871,6 +22871,7 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -23090,6 +23091,7 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="conflict-png"
             onClick={[Function]}
             title="conflict.png"
           >
@@ -23167,6 +23169,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
               onClick={[Function]}
               title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
             >
@@ -23782,6 +23785,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="src-main-js-changenotification-tsx"
               onClick={[Function]}
               title="src/main/js/ChangeNotification.tsx"
             >
@@ -24734,6 +24738,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="src-main-resources-locales-de-plugins-json"
               onClick={[Function]}
               title="src/main/resources/locales/de/plugins.json"
             >
@@ -25257,6 +25262,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="src-main-resources-locales-en-plugins-json"
               onClick={[Function]}
               title="src/main/resources/locales/en/plugins.json"
             >
@@ -25780,6 +25786,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
               onClick={[Function]}
               title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
             >
@@ -26993,6 +27000,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
           >
             <div
               className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+              id="main-java"
               onClick={[Function]}
               title="Main.java"
             >
@@ -27566,6 +27574,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -27674,6 +27683,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -27782,6 +27792,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -27890,6 +27901,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -27998,6 +28010,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -28106,6 +28119,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -28223,6 +28237,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -28295,6 +28310,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -29150,6 +29166,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -29601,6 +29618,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -30052,6 +30070,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -30124,6 +30143,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -30286,6 +30306,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -30901,6 +30922,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -31853,6 +31875,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -32376,6 +32399,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -32899,6 +32923,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -34112,6 +34137,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -34684,6 +34710,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -35299,6 +35326,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -36251,6 +36279,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -36774,6 +36803,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -37297,6 +37327,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -38510,6 +38541,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -39082,6 +39114,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -39664,6 +39697,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -40523,6 +40557,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -40978,6 +41013,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -41433,6 +41469,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -42495,6 +42532,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -43034,6 +43072,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -43627,6 +43666,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -44497,6 +44537,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -44963,6 +45004,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -45429,6 +45471,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -46502,6 +46545,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -47052,6 +47096,7 @@ exports[`Storyshots Repositories/Diff Highlight line on hover 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java"
           >
@@ -47894,6 +47939,7 @@ exports[`Storyshots Repositories/Diff Hunk gutter hover icon 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java"
           >
@@ -48736,6 +48782,7 @@ exports[`Storyshots Repositories/Diff Hunks 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java"
           >
@@ -49578,6 +49625,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -50168,6 +50216,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -51035,6 +51084,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -51486,6 +51536,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -51937,6 +51988,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -52995,6 +53047,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -53542,6 +53595,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -54160,6 +54214,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -55077,6 +55132,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -55558,6 +55614,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -56039,6 +56096,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -57173,6 +57231,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -57744,6 +57803,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -58415,6 +58475,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -59360,6 +59421,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -59863,6 +59925,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -60366,6 +60429,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -61593,6 +61657,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -62201,6 +62266,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="changelog-md"
             onClick={[Function]}
             title="CHANGELOG.md"
           >
@@ -62561,6 +62627,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -63139,6 +63206,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -63994,6 +64062,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -64445,6 +64514,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -64896,6 +64966,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -65954,6 +66025,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
@@ -66489,6 +66561,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
             onClick={[Function]}
             title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
           >
@@ -67104,6 +67177,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-js-changenotification-tsx"
             onClick={[Function]}
             title="src/main/js/ChangeNotification.tsx"
           >
@@ -68056,6 +68130,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-de-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/de/plugins.json"
           >
@@ -68579,6 +68654,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-main-resources-locales-en-plugins-json"
             onClick={[Function]}
             title="src/main/resources/locales/en/plugins.json"
           >
@@ -69102,6 +69178,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
             onClick={[Function]}
             title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
           >
@@ -70315,6 +70392,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
         >
           <div
             className="LazyDiffFile__FullWidthTitleHeader-sc-pn0jjx-2 ecJrIc level-left is-flex is-clickable"
+            id="main-java"
             onClick={[Function]}
             title="Main.java"
           >
diff --git a/scm-ui/ui-components/src/repos/LazyDiffFile.tsx b/scm-ui/ui-components/src/repos/LazyDiffFile.tsx
index 6d7992a01e..ab349dc98d 100644
--- a/scm-ui/ui-components/src/repos/LazyDiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/LazyDiffFile.tsx
@@ -156,9 +156,9 @@ class DiffFile extends React.Component<Props, State> {
     }
   };
 
-  toggleCollapse = () => {
-    const { onCollapseStateChange } = this.props;
-    const { file } = this.state;
+  toggleCollapse = (event: React.MouseEvent<HTMLDivElement>) => {
+    const { onCollapseStateChange, isCollapsed } = this.props;
+    const { file, collapsed } = this.state;
     if (this.hasContent(file)) {
       if (onCollapseStateChange) {
         onCollapseStateChange(file);
@@ -168,6 +168,17 @@ class DiffFile extends React.Component<Props, State> {
         }));
       }
     }
+    if (this.props.stickyHeader) {
+      const element = document.getElementById(event.currentTarget.id);
+      // Prevent skipping diffs on collapsing long ones because of the sticky header
+      // We jump to the start of the diff and afterwards go slightly up to show the diff header right under the page header
+      // Only scroll if diff is not collapsed and is using the "sticky" mode
+      const pageHeaderSize = 50;
+      if (element && (isCollapsed ? !isCollapsed(file) : !collapsed) && element.getBoundingClientRect().top < pageHeaderSize) {
+        element.scrollIntoView();
+        window.scrollBy(0, -pageHeaderSize);
+      }
+    }
   };
 
   toggleSideBySide = (callback: () => void) => {
@@ -542,6 +553,7 @@ class DiffFile extends React.Component<Props, State> {
               className={classNames("level-left", "is-flex", "is-clickable")}
               onClick={this.toggleCollapse}
               title={this.hoverFileTitle(file)}
+              id={this.getAnchorId(file)}
             >
               {collapseIcon}
               <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow", "is-size-6", "ml-1")}>