tweaking share edit

app/packages/web/src/components/DiffView.tsx

@@ -1,5 +1,5 @@
 import { type Component, createSignal, onMount } from "solid-js"
-import { diffLines, type Change } from "diff"
+import { diffLines } from "diff"
 import CodeBlock from "./CodeBlock"
 import styles from "./diffview.module.css"
 
@@ -23,42 +23,49 @@ const DiffView: Component<DiffViewProps> = (props) => {
     const chunks = diffLines(props.oldCode, props.newCode)
     const diffRows: DiffRow[] = []
 
-    chunks.forEach((chunk: Change) => {
+    for (const chunk of chunks) {
       const lines = chunk.value.split(/\r?\n/)
       if (lines.at(-1) === "") lines.pop()
 
-      lines.forEach((line) => {
+      for (const line of lines) {
         diffRows.push({
           left: chunk.removed ? line : chunk.added ? "" : line,
           right: chunk.added ? line : chunk.removed ? "" : line,
-          type: chunk.added ? "added"
-            : chunk.removed ? "removed"
+          type: chunk.added
+            ? "added"
+            : chunk.removed
+              ? "removed"
               : "unchanged",
         })
-      })
-    })
+      }
+    }
 
     setRows(diffRows)
   })
 
   return (
     <div class={`${styles.diff} ${props.class ?? ""}`}>
-      {rows().map((r) => (
-        <div data-section="row">
+      <div class={styles.column}>
+        {rows().map((r) => (
           <CodeBlock
             code={r.left}
             lang={props.lang}
             data-section="cell"
             data-diff-type={r.type === "removed" ? "removed" : ""}
           />
+        ))}
+      </div>
+
+      <div class={styles.column}>
+        {rows().map((r) => (
           <CodeBlock
             code={r.right}
             lang={props.lang}
             data-section="cell"
             data-diff-type={r.type === "added" ? "added" : ""}
           />
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   )
 }

app/packages/web/src/components/diffview.module.css

@@ -1,70 +1,79 @@
 .diff {
   display: grid;
-  row-gap: 0;
+  grid-template-columns: 1fr 1fr;
   border: 1px solid var(--sl-color-divider);
   background-color: var(--sl-color-bg-surface);
   border-radius: 0.25rem;
+}
 
-  [data-section="row"] {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+.column {
+ display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+  min-width: 0;
+  align-items: flex-start;
 
-    &:first-child [data-section="cell"] {
-      padding-top: 0.375rem;
-    }
-    &:last-child [data-section="cell"] {
-      padding-bottom: 0.375rem;
-    }
+  &:first-child {
+    border-right: 1px solid var(--sl-color-divider);
   }
 
-  [data-section="cell"] {
-    position: relative;
-    padding-left: 1.5ch;
-    padding: 0.25rem 0.5rem 0.25rem 1.5ch;
-    overflow-x: auto;
-    margin: 0;
+  & > [data-section="cell"]:first-child {
+    padding-top: 0.5rem;
+  }
+  & > [data-section="cell"]:last-child {
+    padding-bottom: 0.5rem;
+  }
+}
 
-    pre {
-      background-color: var(--sl-color-bg-surface) !important;
-    }
+[data-section="cell"] {
+  position: relative;
+  flex: none;
+  width: max-content;
+  padding-left: 1.5ch;
+  padding: 0.1875rem 0.5rem 0.1875rem 1.5ch;
+  margin: 0;
 
-    &:first-child {
-      border-right: 1px solid var(--sl-color-divider);
+  pre {
+    background-color: var(--sl-color-bg-surface) !important;
+    white-space: pre;
+
+    code > span:empty::before {
+      content: "\00a0";
+      white-space: pre;
+      display: inline-block;
+      width: 0;
     }
   }
+}
 
-  [data-diff-type="removed"] {
-    background-color: var(--sl-color-red-low);
+[data-diff-type="removed"] {
+  background-color: var(--sl-color-red-low);
 
-    & > pre {
-      --shiki-dark-bg: var(--sl-color-red-low) !important;
-      background-color: transparent !important;
-    }
+  pre {
+    background-color: var(--sl-color-red-low) !important;
+  }
 
-    &::before {
-      content: "-";
-      position: absolute;
-      left: 0.5ch;
-      user-select: none;
-      color: var(--sl-color-red-high);
-    }
+  &::before {
+    content: "-";
+    position: absolute;
+    left: 0.5ch;
+    user-select: none;
+    color: var(--sl-color-red-high);
   }
+}
 
-  [data-diff-type="added"] {
-    background-color: var(--sl-color-green-low);
+[data-diff-type="added"] {
+  background-color: var(--sl-color-green-low);
 
-    & > pre {
-      --shiki-dark-bg: var(--sl-color-green-low) !important;
-      background-color: transparent !important;
-    }
+  pre {
+    background-color: var(--sl-color-green-low) !important;
+  }
 
-    &::before {
-      content: "+";
-      position: absolute;
-      left: 0.6ch;
-      user-select: none;
-      color: var(--sl-color-green-high);
-    }
+  &::before {
+    content: "+";
+    position: absolute;
+    left: 0.6ch;
+    user-select: none;
+    color: var(--sl-color-green-high);
   }
 }
-

app/packages/web/src/components/share.module.css

@@ -320,7 +320,7 @@
 
 .code-block {
   pre {
-    line-height: 1.4;
+    line-height: 1.25;
     font-size: 0.75rem;
   }
 }