diff --git a/gradle/changelog/annotate_overflow.yaml b/gradle/changelog/annotate_overflow.yaml
new file mode 100644
index 0000000000..0dbd2b58e9
--- /dev/null
+++ 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))
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 0d04539dc4..2bd0d73d88 100644
--- 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"
diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
index 7ed489af25..d57739a7fb 100644
--- 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>
   );
 };
diff --git a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
index c32d172e89..30615df678 100644
--- 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",
       });
     }
   };
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
index 9cf3cfc3f3..91ceb154ce 100644
--- 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>;
   }
 }