Fix annotate overflow and doubled spacing in code views (#1678)

Fix annotate overflow: Total div size was smaller than minimum size of individual children (+ margin). Fix doubled spacing in code content views: Spacing duplicates through .panel-block as default for styling, various containers and inner syntax highlighter definition. Unfortunately, the latter is not easy to change, since it is also used with inline syntax highlighter.
2025-11-10 23:45:44 +01:00 · 2021-06-01 23:57:36 -07:00
parent 8ed2c1509f
commit 5cb2f077d9
5 changed files with 66 additions and 59 deletions
--- a/gradle/changelog/annotate_overflow.yaml
+++ b/gradle/changelog/annotate_overflow.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Fix annotate overflow and doubled spacing in code views ([#1678](https://github.com/scm-manager/scm-manager/pull/1678))
--- a/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
@@ -5,13 +5,10 @@ exports[`Storyshots Annotate Default 1`] = `
  className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
 >
  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
+    className="panel-block"
  >
    <pre
+      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
      style={
        Object {
          "MozHyphens": "none",
@@ -66,7 +63,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -123,7 +120,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -146,7 +143,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -223,7 +220,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -246,7 +243,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -358,7 +355,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -460,7 +457,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -522,7 +519,7 @@ exports[`Storyshots Annotate Default 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -558,13 +555,10 @@ exports[`Storyshots Annotate Markdown 1`] = `
  className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
 >
  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
+    className="panel-block"
  >
    <pre
+      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
      style={
        Object {
          "MozHyphens": "none",
@@ -619,7 +613,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -688,7 +682,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -711,7 +705,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -754,7 +748,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -777,7 +771,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -898,7 +892,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -941,7 +935,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1003,7 +997,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1039,13 +1033,10 @@ exports[`Storyshots Annotate With Avatars 1`] = `
  className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
 >
  <div
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
+    className="panel-block"
  >
    <pre
+      className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
      style={
        Object {
          "MozHyphens": "none",
@@ -1100,7 +1091,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1162,7 +1153,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1185,7 +1176,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1267,7 +1258,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1290,7 +1281,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1407,7 +1398,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1514,7 +1505,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
@@ -1581,7 +1572,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
          className="AnnotateLine__Line-h9c4md-4 ePpBEX"
        >
          <div
-            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD"
+            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
          />
          <div
            className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
--- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
@@ -36,6 +36,7 @@ import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";
 import { determineLanguage } from "../../languages";
+import styled from "styled-components";

 type Props = {
  source: AnnotatedSource;
@@ -53,9 +54,14 @@ type State = {

 const initialState = {
  onPopover: false,
-  onLine: false
+  onLine: false,
 };

+const NoSpacingReactSyntaxHighlighter = styled(ReactSyntaxHighlighter)`
+  margin: 0 !important;
+  padding: 0 !important;
+`;
+
 const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "enter-line": {
@@ -67,14 +73,14 @@ const reducer = (state: State, action: Action): State => {
        offset: action.offset,
        line: action.line,
        onLine: true,
-        onPopover: false
+        onPopover: false,
      };
    }
    case "leave-line": {
      if (state.onPopover) {
        return {
          ...state,
-          onLine: false
+          onLine: false,
        };
      }
      return initialState;
@@ -82,14 +88,14 @@ const reducer = (state: State, action: Action): State => {
    case "enter-popover": {
      return {
        ...state,
-        onPopover: true
+        onPopover: true,
      };
    }
    case "leave-popover": {
      if (state.onLine) {
        return {
          ...state,
-          onPopover: false
+          onPopover: false,
        };
      }
      return initialState;
@@ -107,7 +113,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
        node,
        stylesheet,
        useInlineStyles,
-        key: `code-segment${i}`
+        key: `code-segment${i}`,
      });

      if (i + 1 < rows.length) {
@@ -144,16 +150,16 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
  }, "");

  return (
-    <div style={{ position: "relative" }}>
+    <div className="panel-block">
      {popover}
-      <ReactSyntaxHighlighter
+      <NoSpacingReactSyntaxHighlighter
        showLineNumbers={false}
        language={determineLanguage(source.language)}
        style={highlightingTheme}
        renderer={defaultRenderer}
      >
        {code}
-      </ReactSyntaxHighlighter>
+      </NoSpacingReactSyntaxHighlighter>
    </div>
  );
 };
--- a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
@@ -77,11 +77,11 @@ const Line = styled.div`

 const Metadata = styled(LineElement)`
  cursor: help;
-  width: 217px;
+  width: 15.5em;
 `;

 const EmptyMetadata = styled(LineElement)`
-  width: 217px;
+  width: 15.5em; // width of author + when
 `;

 const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
@@ -104,7 +104,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
        annotation,
        line: nr,
        offset: link.current!.offsetTop,
-        type: "enter-line"
+        type: "enter-line",
      });
    }
  };
@@ -113,7 +113,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
    if (showAnnotation) {
      dispatchDeferred(dispatch, {
        line: nr,
-        type: "leave-line"
+        type: "leave-line",
      });
    }
  };
--- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
@@ -30,6 +30,14 @@ import { getContentType } from "./contentType";
 import { File, Repository } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer";
+import styled from "styled-components";
+
+const NoSpacingSyntaxHighlighterContainer = styled.div`
+  & pre {
+    margin: 0 !important;
+    padding: 0 0 0.5rem !important;
+  }
+`;

 type Props = {
  repository: Repository;
@@ -52,26 +60,26 @@ class SourcesView extends React.Component<Props, State> {
    this.state = {
      contentType: "",
      language: "",
-      loaded: false
+      loaded: false,
    };
  }

  componentDidMount() {
    const { file } = this.props;
    getContentType(file._links.self.href)
-      .then(result => {
+      .then((result) => {
        this.setState({
          ...this.state,
          contentType: result.type,
          language: result.language,
-          loaded: true
+          loaded: true,
        });
      })
-      .catch(error => {
+      .catch((error) => {
        this.setState({
          ...this.state,
          error,
-          loaded: true
+          loaded: true,
        });
      });
  }
@@ -101,7 +109,7 @@ class SourcesView extends React.Component<Props, State> {
            file,
            contentType,
            revision,
-            basePath
+            basePath,
          }}
        >
          <DownloadViewer file={file} />
@@ -123,7 +131,7 @@ class SourcesView extends React.Component<Props, State> {

    const sources = this.showSources();

-    return <div className="panel-block">{sources}</div>;
+    return <NoSpacingSyntaxHighlighterContainer className="panel-block">{sources}</NoSpacingSyntaxHighlighterContainer>;
  }
 }