From f7d44b178bc12a781379178882355d27c28453a9 Mon Sep 17 00:00:00 2001
From: Jay V <air@live.ca>
Date: Thu, 10 Jul 2025 18:19:18 -0400
Subject: [PATCH] docs: share fix mobile diffs

---
 .../components/share/content-code.module.css  |   1 +
 .../components/share/content-diff.module.css  | 109 +++++++++++++-----
 .../web/src/components/share/content-diff.tsx |   9 +-
 3 files changed, 81 insertions(+), 38 deletions(-)

diff --git a/packages/web/src/components/share/content-code.module.css b/packages/web/src/components/share/content-code.module.css
index 9fa105673..6ad138b5f 100644
--- a/packages/web/src/components/share/content-code.module.css
+++ b/packages/web/src/components/share/content-code.module.css
@@ -9,6 +9,7 @@
     border: none;
     background-color: transparent;
     padding: 0;
+    border-radius: 0;
   }
 
   pre {
diff --git a/packages/web/src/components/share/content-diff.module.css b/packages/web/src/components/share/content-diff.module.css
index 718ae3690..18854a889 100644
--- a/packages/web/src/components/share/content-diff.module.css
+++ b/packages/web/src/components/share/content-diff.module.css
@@ -31,7 +31,7 @@
       overflow-x: visible;
       min-width: 0;
       align-items: stretch;
-      padding: 0 1rem;
+      padding: 0 1rem 0 2.2ch;
 
       &[data-diff-type="removed"] {
         background-color: var(--sl-color-red-low);
@@ -44,7 +44,7 @@
         &::before {
           content: "-";
           position: absolute;
-          left: 0.5ch;
+          left: 0.6ch;
           top: 1px;
           user-select: none;
           color: var(--sl-color-red-high);
@@ -64,7 +64,7 @@
           position: absolute;
           user-select: none;
           color: var(--sl-color-green-high);
-          left: 0.5ch;
+          left: 0.6ch;
           top: 1px;
         }
       }
@@ -75,50 +75,95 @@
     }
   }
 
-  .diff > .row:first-child [data-section="cell"]:first-child {
-    padding-top: 0.5rem;
-  }
+  /* .diff > .row:first-child [data-section="cell"]:first-child { */
+  /*   padding-top: 0.5rem; */
+  /* } */
+  /**/
+  /* .diff > .row:last-child [data-section="cell"]:last-child { */
+  /*   padding-bottom: 0.5rem; */
+  /* } */
+  /**/
+  /* [data-section="cell"] { */
+  /*   position: relative; */
+  /*   flex: 1; */
+  /*   display: flex; */
+  /*   flex-direction: column; */
+  /**/
+  /*   width: 100%; */
+  /*   padding: 0.1875rem 0.5rem 0.1875rem 2.2ch; */
+  /*   margin: 0; */
+  /**/
+  /*   &[data-display-mobile="true"] { */
+  /*     display: none; */
+  /*   } */
+  /**/
+  /*   pre { */
+  /*     --shiki-dark-bg: var(--sl-color-bg-surface) !important; */
+  /*     background-color: var(--sl-color-bg-surface) !important; */
+  /**/
+  /*     white-space: pre-wrap; */
+  /*     word-break: break-word; */
+  /**/
+  /*     code > span:empty::before { */
+  /*       content: "\00a0"; */
+  /*       white-space: pre; */
+  /*       display: inline-block; */
+  /*       width: 0; */
+  /*     } */
+  /*   } */
+  /* } */
 
-  .diff > .row:last-child [data-section="cell"]:last-child {
-    padding-bottom: 0.5rem;
-  }
+  [data-component="mobile"] {
 
-  [data-section="cell"] {
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+    & > [data-component="diff-block"] > div {
+      padding: 0 1rem 0 2.2ch;
 
-    width: 100%;
-    padding: 0.1875rem 0.5rem 0.1875rem 2.2ch;
-    margin: 0;
+      &[data-diff-type="removed"] {
+        position: relative;
+        background-color: var(--sl-color-red-low);
 
-    &[data-display-mobile="true"] {
-      display: none;
-    }
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
 
-    pre {
-      --shiki-dark-bg: var(--sl-color-bg-surface) !important;
-      background-color: var(--sl-color-bg-surface) !important;
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
 
-      white-space: pre-wrap;
-      word-break: break-word;
+      &[data-diff-type="added"] {
+        position: relative;
+        background-color: var(--sl-color-green-low);
 
-      code > span:empty::before {
-        content: "\00a0";
-        white-space: pre;
-        display: inline-block;
-        width: 0;
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-green-high);
+        }
       }
     }
   }
 
   @media (max-width: 40rem) {
-    [data-slot="desktop"] {
+    [data-component="desktop"] {
       display: none;
     }
 
-    [data-slot="mobile"] {
+    [data-component="mobile"] {
       display: block;
     }
   }
diff --git a/packages/web/src/components/share/content-diff.tsx b/packages/web/src/components/share/content-diff.tsx
index 894145c34..c196c4bcb 100644
--- a/packages/web/src/components/share/content-diff.tsx
+++ b/packages/web/src/components/share/content-diff.tsx
@@ -173,12 +173,9 @@ export function ContentDiff(props: Props) {
         {mobileRows().map((block) => (
           <div data-component="diff-block" data-type={block.type}>
             {block.lines.map((line) => (
-              <ContentCode
-                code={line}
-                lang={props.lang}
-                data-section="cell"
-                data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}
-              />
+              <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
+                <ContentCode code={line} lang={props.lang} flush />
+              </div>
             ))}
           </div>
         ))}