[field] Fix spacing between changes and groups of changes

sanity-io · Oct 6, 2020 · 839825f · 839825f
1 parent b2bd4a4
commit 839825f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/packages/@sanity/field/src/diff/components/ChangeList.css b/packages/@sanity/field/src/diff/components/ChangeList.css
@@ -3,6 +3,12 @@
 .root {
 }
 
+.changeList {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-gap: 2em;
+}
+
 .footer {
   margin-top: 2em;
 }

diff --git a/packages/@sanity/field/src/diff/components/ChangeList.tsx b/packages/@sanity/field/src/diff/components/ChangeList.tsx
@@ -80,9 +80,11 @@ export function ChangeList({diff, fields, schemaType}: Props): React.ReactElemen
       className={styles.root}
       data-revert-all-changes-hover={confirmRevertAllHover ? '' : undefined}
     >
-      {changes.map(change => (
-        <ChangeResolver change={change} key={change.key} />
-      ))}
+      <div className={styles.changeList}>
+        {changes.map(change => (
+          <ChangeResolver change={change} key={change.key} />
+        ))}
+      </div>
 
       {showFooter && (
         <div className={styles.footer}>

diff --git a/packages/@sanity/field/src/diff/components/FieldChange.css b/packages/@sanity/field/src/diff/components/FieldChange.css
@@ -1,9 +1,6 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  @nest div + & {
-    margin-top: var(--extra-large-padding);
-  }
 }
 
 .error {
@@ -12,7 +9,6 @@
 
 .header {
   padding: 0 0 var(--extra-small-padding);
-  margin-left: -1px;
 }
 
 .change {

diff --git a/packages/@sanity/field/src/diff/components/GroupChange.css b/packages/@sanity/field/src/diff/components/GroupChange.css
@@ -1,10 +1,9 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .groupChange {
-  margin-top: var(--extra-large-padding);
 }
 
-.changeList {
+.content {
   position: relative;
   padding: var(--small-padding) 0 0 var(--small-padding);
 
@@ -17,14 +16,16 @@
     bottom: 0;
     border-left: 1px solid var(--gray-lighter);
   }
+}
 
-  @nest [data-revert-all-changes-hover] &::before {
-    border-left: 2px solid var(--state-danger-color);
-  }
+.changeList {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-gap: 2em;
 }
 
-.changeListOutlined {
-  composes: changeList;
+.contentOutlined {
+  composes: content;
 
   @nest &::before {
     border-left: 2px solid var(--state-danger-color);

diff --git a/packages/@sanity/field/src/diff/components/GroupChange.tsx b/packages/@sanity/field/src/diff/components/GroupChange.tsx
@@ -37,10 +37,12 @@ export function GroupChange({change: group}: {change: GroupChangeNode}): React.R
   ])
 
   const content = (
-    <div className={isHoveringRevert ? styles.changeListOutlined : styles.changeList}>
-      {changes.map(change => (
-        <ChangeResolver key={change.key} change={change} />
-      ))}
+    <div className={isHoveringRevert ? styles.contentOutlined : styles.content}>
+      <div className={styles.changeList}>
+        {changes.map(change => (
+          <ChangeResolver key={change.key} change={change} />
+        ))}
+      </div>
 
       {isComparingCurrent && (
         <div ref={hoverRef} className={styles.revertChangesButtonContainer}>