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/__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"

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