Fix editor background color (#714)

* Fix background color for the nbdime's webapps.

* Remove .cm-merge that seems unused in CM6 version.

* Update common.css.

* Update ui-tests snapshots.

* 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/common/mergeview.ts

@@ -136,7 +136,7 @@ const baseTheme = EditorView.baseTheme({
     border: 'var(--jp-border-width) solid var(--jp-border-color1)',
     fontSize: '90%',
     padding: '0 3px',
-    borderRadius: '4px',
+    borderRadius: '4px'
   },
 });
 
@@ -1487,10 +1487,12 @@ export class MergeView extends Panel {
         leftWidget = left.remoteEditorWidget;
       }
       this.addWidget(leftWidget);
+      leftWidget.addClass('cm-merge-pane');
       leftWidget.addClass('cm-merge-left-editor');
 
       if (showBase) {
         this.addWidget(this._base);
+        this._base.addClass('cm-merge-pane');
         this._base.addClass('cm-central-editor');
       }
 
@@ -1576,6 +1578,7 @@ export class MergeView extends Panel {
           );
         }
       }
+      mergeWidget.addClass('cm-merge-pane');
       mergeWidget.addClass('cm-merge-editor');
       //END MERGE CASE
       panes = 3 + (showBase ? 1 : 0);
@@ -1594,6 +1597,7 @@ export class MergeView extends Panel {
       } else {
         panes = 2;
         this.addWidget(this._base);
+        this._base.addClass('cm-merge-pane');
         this._base.addClass('cm-diff-left-editor');
         right = this._right = new DiffView({
           model: remote,
@@ -1606,6 +1610,7 @@ export class MergeView extends Panel {
           },
         });
         let rightWidget = right.remoteEditorWidget;
+        rightWidget.addClass('cm-merge-pane');
         rightWidget.addClass('cm-diff-right-editor');
         this.addWidget(new Widget({ node: right.buildGap() }));
         this.addWidget(rightWidget);

packages/nbdime/src/styles/common.css

@@ -20,15 +20,6 @@
   grid-column: 3;
 }
 
-.nbdime-root .cm-merge {
-  position: relative;
-  white-space: pre;
-  /* style as jp-InputArea-editor: */
-  border: var(--codemirror-border);
-  border-radius: 0px;
-  background: var(--jp-cell-editor-background);
-}
-
 .nbdime-root .cm-merge-3pane,
 .nbdime-root .cm-merge-4pane {
   display: grid;
@@ -73,7 +64,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: end;
-
   z-index: 2;
   height: 100%;
   box-sizing: border-box;
@@ -90,11 +80,12 @@
   line-height: 1;
 }
 
-.nbdime-root .cm-merge-pane {
+.nbdime-root .cm-merge-pane > .cm-editor {
   display: inline-block;
   white-space: normal;
   vertical-align: top;
   width: 100%;
+  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-merge-pane-rightmost {