From a2d3b9f0c83a8ef9ed88efab2703ae436eac71b6 Mon Sep 17 00:00:00 2001
From: Jay <air@live.ca>
Date: Tue, 24 Jun 2025 17:11:43 -0400
Subject: docs: Share page diff view improvements (#373)

---
 packages/web/src/components/diffview.module.css | 65 +++++++++++++++++++------
 1 file changed, 51 insertions(+), 14 deletions(-)

(limited to 'packages/web/src/components/diffview.module.css')

diff --git a/packages/web/src/components/diffview.module.css b/packages/web/src/components/diffview.module.css
index 9fded0a17..b3f61ac02 100644
--- a/packages/web/src/components/diffview.module.css
+++ b/packages/web/src/components/diffview.module.css
@@ -1,39 +1,52 @@
 .diff {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--sl-color-divider);
   background-color: var(--sl-color-bg-surface);
   border-radius: 0.25rem;
 }
 
-.column {
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: stretch;
+}
+
+.beforeColumn,
+.afterColumn {
   display: flex;
   flex-direction: column;
-
   overflow-x: visible;
   min-width: 0;
   align-items: stretch;
+}
 
-  &:first-child {
-    border-right: 1px solid var(--sl-color-divider);
-  }
+.beforeColumn {
+  border-right: 1px solid var(--sl-color-divider);
+}
 
-  & > [data-section="cell"]:first-child {
-    padding-top: 0.5rem;
-  }
-  & > [data-section="cell"]:last-child {
-    padding-bottom: 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: none;
+  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;
@@ -83,3 +96,27 @@
     color: var(--sl-color-green-high);
   }
 }
+
+@media (max-width: 40rem) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+
+  .afterColumn {
+    display: none;
+  }
+
+  .beforeColumn {
+    border-right: none;
+  }
+
+  [data-section="cell"] {
+    &[data-display-mobile="true"] {
+      display: flex;
+    }
+
+    &[data-display-mobile="false"] {
+      display: none;
+    }
+  }
+}
-- 
cgit v1.2.3