tweaking share edit

1 files changed, 57 insertions, 48 deletions

diff --git a/app/packages/web/src/components/diffview.module.css b/app/packages/web/src/components/diffview.module.css
index 94911d06f..b8a6755a5 100644
--- a/app/packages/web/src/components/diffview.module.css
+++ b/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);
   }
 }
-