Make the diff header sticky

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -22635,7 +22635,7 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -22856,7 +22856,7 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
       id="conflict-png"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -22933,7 +22933,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -23550,7 +23550,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="src-main-js-changenotification-tsx"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -24504,7 +24504,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="src-main-resources-locales-de-plugins-json"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -25029,7 +25029,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="src-main-resources-locales-en-plugins-json"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -25554,7 +25554,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -26769,7 +26769,7 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
         id="main-java"
       >
         <div
-          className="panel-heading"
+          className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
         >
           <div
             className="level is-flex-wrap-wrap"
@@ -27344,7 +27344,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -27456,7 +27456,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -27568,7 +27568,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -27680,7 +27680,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -27792,7 +27792,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -27904,7 +27904,7 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -28025,7 +28025,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -28099,7 +28099,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -28956,7 +28956,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -29409,7 +29409,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -29862,7 +29862,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -29936,7 +29936,7 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -30100,7 +30100,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -30717,7 +30717,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -31671,7 +31671,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -32196,7 +32196,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -32721,7 +32721,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -33936,7 +33936,7 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -34510,7 +34510,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -35127,7 +35127,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -36081,7 +36081,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -36606,7 +36606,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -37131,7 +37131,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -38346,7 +38346,7 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -38920,7 +38920,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -39504,7 +39504,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -40365,7 +40365,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -40822,7 +40822,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -41279,7 +41279,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -42343,7 +42343,7 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -42884,7 +42884,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -43480,7 +43480,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -44353,7 +44353,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -44822,7 +44822,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -45291,7 +45291,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -46367,7 +46367,7 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -46920,7 +46920,7 @@ exports[`Storyshots Repositories/Diff Highlight line on hover 1`] = `
       id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -47764,7 +47764,7 @@ exports[`Storyshots Repositories/Diff Hunk gutter hover icon 1`] = `
       id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -48608,7 +48608,7 @@ exports[`Storyshots Repositories/Diff Hunks 1`] = `
       id="src-main-java-com-cloudogu-scm-review-pullrequest-service-defaultpullrequestservice-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -49452,7 +49452,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -50044,7 +50044,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -50913,7 +50913,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -51366,7 +51366,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -51819,7 +51819,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -52879,7 +52879,7 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -53428,7 +53428,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -54048,7 +54048,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -54967,7 +54967,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -55450,7 +55450,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -55933,7 +55933,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -57069,7 +57069,7 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -57642,7 +57642,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -58315,7 +58315,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -59262,7 +59262,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -59767,7 +59767,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -60272,7 +60272,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -61501,7 +61501,7 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -62111,7 +62111,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
       id="changelog-md"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -62473,7 +62473,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -63053,7 +63053,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -63910,7 +63910,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -64363,7 +64363,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -64816,7 +64816,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -65876,7 +65876,7 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -66413,7 +66413,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="src-main-java-com-cloudogu-scm-review-events-eventlistener-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -67030,7 +67030,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="src-main-js-changenotification-tsx"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -67984,7 +67984,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="src-main-resources-locales-de-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -68509,7 +68509,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="src-main-resources-locales-en-plugins-json"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -69034,7 +69034,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="src-test-java-com-cloudogu-scm-review-events-clienttest-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"
@@ -70249,7 +70249,7 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
       id="main-java"
     >
       <div
-        className="panel-heading"
+        className="LazyDiffFile__PanelHeading-sc-pn0jjx-4 panel-heading"
       >
         <div
           className="level is-flex-wrap-wrap"

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -71,7 +71,7 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle
     return <>{content}</>;
   }
   return (
-    <Tooltip message={tooltip} location="top">
+    <Tooltip message={tooltip} location="bottom">
       {content}
     </Tooltip>
   );

scm-ui/ui-components/src/repos/DiffButton.tsx

@@ -45,7 +45,7 @@ const DiffButton: FC<Props> = ({ icon, tooltip, onClick }) => {
   };
 
   return (
-    <Tooltip message={tooltip} location="top">
+    <Tooltip message={tooltip} location="bottom">
       <Button aria-label={tooltip} className="button is-clickable" onClick={handleClick}>
         <i className={`fas fa-${icon}`} />
       </Button>

scm-ui/ui-components/src/repos/DiffTypes.ts

@@ -64,6 +64,7 @@ export type DiffObjectProps = {
   isCollapsed?: (file: File) => boolean;
   onCollapseStateChange?: (file: File, newState?: boolean) => void;
   hunkClass?: (hunk: Hunk) => string;
+  stickyHeader?: boolean;
   /**
    * Fontawesome Icon Unicode
    *

scm-ui/ui-components/src/repos/JumpToFileButton.tsx

@@ -41,7 +41,7 @@ type Props = {
 
 const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
   return (
-    <Tooltip message={tooltip} location="top">
+    <Tooltip message={tooltip} location="bottom">
       <Button aria-label={tooltip} className="button is-clickable" to={link}>
         <Icon name="file-code" color="inherit" alt="" />
       </Button>

scm-ui/ui-components/src/repos/LazyDiffFile.tsx

@@ -61,8 +61,10 @@ type State = Collapsible & {
   expansionError?: any;
 };
 
-const StyledHunk = styled(Hunk)`${props => {
-  let style = props.icon ? `
+const StyledHunk = styled(Hunk)`
+  ${(props) => {
+    let style = props.icon
+      ? `
     .diff-gutter:hover::after {
       font-size: inherit;
       margin-left: 0.5em;
@@ -70,23 +72,25 @@ const StyledHunk = styled(Hunk)`${props => {
       content: "${props.icon}";
       color: var(--scm-column-selection);
     }
-  ` : "";
-  if (!props.actionable) {
-    style += `
+  `
+      : "";
+    if (!props.actionable) {
+      style += `
       .diff-gutter {
         cursor: default;
       }
     `;
-  }
-  if (props.highlightLineOnHover) {
-    style += `
+    }
+    if (props.highlightLineOnHover) {
+      style += `
       tr.diff-line:hover > td {
         background-color: var(--sh-selected-color);
       }
     `;
-  }
-  return style;
-}}`;
+    }
+    return style;
+  }}
+`;
 
 const DiffFilePanel = styled.div`
   /* remove bottom border for collapsed panels */
@@ -106,10 +110,20 @@ const MarginlessModalContent = styled.div`
   }
 `;
 
+const PanelHeading = styled.div<{ sticky: boolean }>`
+  ${(props) =>
+    props.sticky
+      ? `
+   position: sticky;
+   top: 52px;
+  `
+      : ""}
+`;
+
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
-    markConflicts: true
+    markConflicts: true,
   };
 
   constructor(props: Props) {
@@ -118,14 +132,14 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file
+      file: props.file,
     };
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (!this.props.isCollapsed && this.props.defaultCollapse !== prevProps.defaultCollapse) {
       this.setState({
-        collapsed: this.defaultCollapse()
+        collapsed: this.defaultCollapse(),
       });
     }
   }
@@ -148,8 +162,8 @@ class DiffFile extends React.Component<Props, State> {
       if (onCollapseStateChange) {
         onCollapseStateChange(file);
       } else {
-        this.setState(state => ({
-          collapsed: !state.collapsed
+        this.setState((state) => ({
+          collapsed: !state.collapsed,
         }));
       }
     }
@@ -157,8 +171,8 @@ class DiffFile extends React.Component<Props, State> {
 
   toggleSideBySide = (callback: () => void) => {
     this.setState(
-      state => ({
-        sideBySide: !state.sideBySide
+      (state) => ({
+        sideBySide: !state.sideBySide,
       }),
       () => callback()
     );
@@ -170,7 +184,7 @@ class DiffFile extends React.Component<Props, State> {
       onCollapseStateChange(this.state.file, collapsed);
     } else {
       this.setState({
-        collapsed
+        collapsed,
       });
     }
   };
@@ -264,19 +278,13 @@ class DiffFile extends React.Component<Props, State> {
 
   expandHead = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk
-        .expandHead(count)
-        .then(this.diffExpanded)
-        .catch(this.diffExpansionFailed);
+      return expandableHunk.expandHead(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
     };
   };
 
   expandBottom = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk
-        .expandBottom(count)
-        .then(this.diffExpanded)
-        .catch(this.diffExpansionFailed);
+      return expandableHunk.expandBottom(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
     };
   };
 
@@ -294,7 +302,7 @@ class DiffFile extends React.Component<Props, State> {
     if (annotationFactory) {
       return annotationFactory({
         hunk,
-        file
+        file,
       });
     } else {
       return EMPTY_ANNOTATION_FACTORY;
@@ -308,7 +316,7 @@ class DiffFile extends React.Component<Props, State> {
       changeId: getChangeKey(change),
       change,
       hunk,
-      file
+      file,
     };
     if (onClick) {
       onClick(context);
@@ -321,7 +329,7 @@ class DiffFile extends React.Component<Props, State> {
       return {
         onClick: (event: ChangeEvent) => {
           this.handleClickEvent(event.change, hunk);
-        }
+        },
       };
     }
   };
@@ -448,7 +456,7 @@ class DiffFile extends React.Component<Props, State> {
   hasContent = (file: FileDiff) => file && !file.isBinary && file.hunks && file.hunks.length > 0;
 
   render() {
-    const { fileControlFactory, fileAnnotationFactory, t } = this.props;
+    const { fileControlFactory, fileAnnotationFactory, stickyHeader = false, t } = this.props;
     const { file, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
     const collapsed = this.isCollapsed();
@@ -527,7 +535,7 @@ class DiffFile extends React.Component<Props, State> {
         id={this.getAnchorId(file)}
       >
         {errorModal}
-        <div className="panel-heading">
+        <PanelHeading className="panel-heading" sticky={stickyHeader}>
           <div className={classNames("level", "is-flex-wrap-wrap")}>
             <FullWidthTitleHeader
               className={classNames("level-left", "is-flex", "is-clickable")}
@@ -542,7 +550,7 @@ class DiffFile extends React.Component<Props, State> {
             </FullWidthTitleHeader>
             {headerButtons}
           </div>
-        </div>
+        </PanelHeading>
         {body}
       </DiffFilePanel>
     );

scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx

@@ -60,6 +60,7 @@ class ChangesetDiff extends React.Component<Props> {
           defaultCollapse={defaultCollapse}
           sideBySide={false}
           fileControlFactory={fileControlFactory}
+          stickyHeader={true}
         />
       );
     }