Change file tree height

Squash commits of branch bugfix/fix_height_for_file_tree:

- Export FieldMessage

- Adjust height file tree

- Only sticky if width is large enough

- Fix not sticky in changeset

- File diff tree height is now configurable

- Add changelog

gradle/changelog/adjust_file_diff_tree_height.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Entries are shown correctly

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

@@ -26,7 +26,7 @@ import { DiffObjectProps } from "./DiffTypes";
 import DiffStatistics from "./DiffStatistics";
 import { DiffDropDown } from "../index";
 import DiffFileTree from "./diff/DiffFileTree";
-import { DiffContent, Divider, FileTreeContent } from "./diff/styledElements";
+import { DiffContent, Divider, FileTreeContent, StickyFileDiffContainer } from "./diff/styledElements";
 import { useHistory, useLocation } from "react-router-dom";
 import { getFileNameFromHash } from "./diffs";
 import LayoutRadioButtons from "./LayoutRadioButtons";
@@ -111,7 +111,7 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
         </div>
         <LayoutRadioButtons layout={layout} setLayout={setLayout} />
         <div className="is-flex mb-4 mt-1 columns is-multiline">
-          <div
+          <StickyFileDiffContainer
             className={
               (layout === "Both" ? "column pl-3 is-one-quarter" : "column pl-3 is-full") +
               (layout !== "Diff" ? "" : " is-hidden")
@@ -125,10 +125,11 @@ const LoadingDiff: FC<Props> = ({ url, limit, refetchOnWindowFocus, ...props })
                   tree={data.tree}
                   currentFile={decodeURIComponent(getFileNameFromHash(location.hash) ?? "")}
                   setCurrentFile={setFilePath}
+                  gap={12}
                 />
               )}
             </FileTreeContent>
-          </div>
+          </StickyFileDiffContainer>
           <DiffContent id={diffContentId} className={layout !== "Tree" ? "column" : "is-hidden"}>
             <Diff
               defaultCollapse={collapsed}

scm-ui/ui-components/src/repos/diff/DiffFileTree.tsx

@@ -21,16 +21,16 @@ import { Icon } from "@scm-manager/ui-core";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
-type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void };
+type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void; gap?: number };
 
 const StyledIcon = styled(Icon)`
   min-width: 1.5rem;
 `;
 
-const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile }) => {
+const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }) => {
   return (
     <FileDiffContainer className={"mt-4 py-3 pr-2"}>
-      <FileDiffContent>
+      <FileDiffContent gap={gap}>
         {Object.keys(tree.children).map((key) => (
           <TreeNode
             key={key}

scm-ui/ui-components/src/repos/diff/styledElements.tsx

@@ -96,17 +96,28 @@ export const DiffContent = styled.div`
   width: 100%;
 `;
 
-export const FileDiffContainer = styled.div`
+export const StickyFileDiffContainer = styled.div`
+  top: 3rem;
   position: sticky;
+  height: 100%;
+`;
+
+export const FileDiffContainer = styled.div`
   top: 5rem;
 `;
 
-export const FileDiffContent = styled.ul`
+export const FileDiffContent = styled.ul<{ gap?: number }>`
   overflow: auto;
-  @supports (-moz-appearance: none) {
-    max-height: calc(100vh - 11rem);
+  ${(props) => {
+    if (props.gap) {
+      return `
+     @supports (-moz-appearance: none) {
+    max-height: calc(100vh - ${props.gap}rem);
   }
-  max-height: calc(100svh - 11rem);
+  max-height: calc(100svh - ${props.gap}rem);
+  `;
+    }
+  }};
 `;
 
 export const Divider = styled.div`