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.

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>
   );
 };

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",
       });
     }
   };