Use pseudo-elements instead of border to preserve line height (#687)

* Use pseudo-elements instead of border to preserve line height

Note: using negative margin does not work because CM6
calculates line height to programmatically set the height
of gutter (e.g. line numbers), which does not account for margins.

* Update Playwright Snapshots

* Update Playwright Snapshots

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/nbdime/src/styles/diff.css

@@ -152,21 +152,25 @@
 }
 
 .jp-Notebook-diff .cm-line {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
+  /* enable positioning pseudo-elements relative to line */
+  position: relative;
 }
 
 /* Color diff highlighting according to style vars */
 .jp-Notebook-diff .cm-merge-r-chunk {
   background-color: var(--jp-diff-deleted-color2);
 }
 
-.jp-Notebook-diff .cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-diff-deleted-color0);
-}
-
-.jp-Notebook-diff .cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-diff-deleted-color0);
+/* border-top/bottom without taking up space */
+.jp-Notebook-diff .cm-merge-r-chunk-start::before,
+.jp-Notebook-diff .cm-merge-r-chunk-end::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-diff-deleted-color0);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-diff .cm-merge-r-connect {
@@ -187,12 +191,17 @@
   background-color: var(--jp-diff-added-color2);
 }
 
-.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-diff-added-color0);
-}
-
-.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-diff-added-color0);
+/* border-top/bottom without taking up space */
+.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-start::before,
+.jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-chunk-end::after
+{
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-diff-added-color0);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-diff .cm-diff-right-editor .cm-merge-r-connect {

packages/nbdime/src/styles/merge.css

@@ -76,27 +76,31 @@
   width: 100%;
 }
 
-.jp-Notebook-merge .cm-merge-spacer {
-  background-color: #eee;
+.jp-Notebook-merge .cm-line {
+  /* enable positioning pseudo-elements relative to line */
+  position: relative;
 }
 
-.jp-Notebook-merge .cm-line {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
+.jp-Notebook-merge .cm-merge-spacer {
+  background-color: #eee;
 }
 
 .jp-Notebook-merge .cm-merge-r-chunk {
   background-color: var(--jp-merge-remote-color2);
 }
 
-.jp-Notebook-merge .cm-merge-r-chunk-start,
-.jp-Notebook-merge .cm-merge-m-chunk-start-remote {
-  border-top: 1px solid var(--jp-merge-remote-color1);
-}
-
-.jp-Notebook-merge .cm-merge-r-chunk-end,
-.jp-Notebook-merge .cm-merge-m-chunk-end-remote {
-  border-bottom: 1px solid var(--jp-merge-remote-color1);
+/* border-top/bottom without taking up space */
+.jp-Notebook-merge .cm-merge-r-chunk-start::before,
+.jp-Notebook-merge .cm-merge-m-chunk-start-remote::before,
+.jp-Notebook-merge .cm-merge-r-chunk-end::after,
+.jp-Notebook-merge .cm-merge-m-chunk-end-remote::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-remote-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-r-connect {
@@ -125,14 +129,18 @@
   background-color: var(--jp-merge-local-color2);
 }
 
-.jp-Notebook-merge .cm-merge-l-chunk-start,
-.jp-Notebook-merge .cm-merge-m-chunk-start-local {
-  border-top: 1px solid var(--jp-merge-local-color1);
-}
-
-.jp-Notebook-merge .cm-merge-l-chunk-end,
-.jp-Notebook-merge .cm-merge-m-chunk-end-local {
-  border-bottom: 1px solid var(--jp-merge-local-color1);
+/* border-top/bottom without taking up space */
+.jp-Notebook-merge .cm-merge-l-chunk-start::before,
+.jp-Notebook-merge .cm-merge-m-chunk-start-local::before,
+.jp-Notebook-merge .cm-merge-l-chunk-end::after,
+.jp-Notebook-merge .cm-merge-m-chunk-end-local::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-local-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-l-connect {
@@ -161,24 +169,30 @@
   background-color: #ffb;
 }
 
-.jp-Notebook-merge .cm-merge-m-chunk-start-custom {
-  border-top: 1px solid #fe6;
-}
-
-.jp-Notebook-merge .cm-merge-m-chunk-end-custom {
-  border-bottom: 1px solid #fe6;
+.jp-Notebook-merge .cm-merge-m-chunk-start-custom::before,
+.jp-Notebook-merge .cm-merge-m-chunk-end-custom::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: #fe6;
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge .cm-merge-l-chunk.cm-merge-r-chunk {
   background: var(--jp-merge-both-color2);
 }
 
-.jp-Notebook-merge .cm-merge-l-chunk-start.cm-merge-r-chunk-start {
-  border-top: 1px solid var(--jp-merge-both-color1);
-}
-
-.jp-Notebook-merge .cm-merge-l-chunk-end.cm-merge-r-chunk-end {
-  border-bottom: 1px solid var(--jp-merge-both-color1);
+.jp-Notebook-merge .cm-merge-l-chunk-start.cm-merge-r-chunk-start::before,
+.jp-Notebook-merge .cm-merge-l-chunk-end.cm-merge-r-chunk-end::after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: var(--jp-merge-both-color1);
+  display: block;
+  position: absolute;
+  left: 0px;
 }
 
 .jp-Notebook-merge