fix(vcs): lay out a merge commit's file side by side, each pane scrolling

Opening a file of a merge commit from the Git log stacked its three panes (parent 1, merge result, parent 2) in a column the editor could not scroll: only the first parent's text showed, without the changes, and the wheel and arrow keys did not move it. The panes now sit side by side under a label row, each one scrolls and they stay in step.

Fixes #3108

src/features/vcs/GitLog.module.css

@@ -444,6 +444,54 @@
   display: flex;
   flex-direction: column;
 }
+/* Go to a merge commit's file: parent 1 | merge result | parent 2, each pane scrolling itself. */
+.mergeDiff {
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.mergeDiffLabels {
+  flex: none;
+  height: var(--h-row);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-bottom: 1px solid var(--border);
+  color: var(--fg-secondary);
+  font-size: var(--fs-small);
+}
+.mergeDiffLabels > span {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 0 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mergeDiffLabels > span + span {
+  border-left: 1px solid var(--border);
+}
+.mergeDiffPanes {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.mergeDiffPane {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+.mergeDiffPane + .mergeDiffPane {
+  border-left: 1px solid var(--border);
+}
+.mergeDiffPane > :global(.cm-editor) {
+  flex: 1;
+  min-width: 0;
+}
 .subjectLine {
   color: var(--fg-strong);
   font-weight: 600;

src/features/vcs/GitMergeDiff.tsx

@@ -51,10 +51,7 @@ export function GitMergeDiff({ input }: { input: EditorInput }) {
           }
         for (const [i, text] of texts.entries()) {
           const pane = document.createElement("div");
-          pane.style.cssText = "flex:1;min-width:0;display:flex;flex-direction:column";
-          const label = document.createElement("div");
-          label.textContent = `${sides[i]!.rev.slice(0, 8)} · ${sides[i]!.path}`;
-          pane.append(label);
+          pane.className = styles.mergeDiffPane!;
           host.current.append(pane);
           const view = new EditorView({
             parent: pane,
@@ -86,10 +83,16 @@ export function GitMergeDiff({ input }: { input: EditorInput }) {
       element?.replaceChildren();
     };
   }, [data]);
+  const labels = [data.parents[0]!, { rev: data.revision, path: data.path }, data.parents[1]!];
   return (
-    <>
-      <div role={error ? "alert" : undefined}>{error}</div>
-      <div className={styles.revisionSource} style={{ display: "flex" }} ref={host} />
-    </>
+    <div className={styles.mergeDiff}>
+      {error && <div role="alert">{error}</div>}
+      <div className={styles.mergeDiffLabels}>
+        {labels.map((side, i) => (
+          <span key={i}>{`${side.rev.slice(0, 8)} · ${side.path}`}</span>
+        ))}
+      </div>
+      <div className={styles.mergeDiffPanes} ref={host} />
+    </div>
   );
 }