[form-builder] Update array grid item CSS

sanity-io · Oct 6, 2020 · 5bb78d9 · 5bb78d9
1 parent 88d1b81
commit 5bb78d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputGridItem.css b/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputGridItem.css
@@ -91,6 +91,7 @@
   display: flex;
   align-items: center;
   margin-top: var(--extra-small-padding);
+  padding: var(--extra-small-padding);
 }
 
 .dragHandleContainer {

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputGridItem.tsx b/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputGridItem.tsx
@@ -273,27 +273,25 @@ export class ArrayInputGridItem extends React.PureComponent<ArrayInputGridItemPr
               )}
             </div>
 
-            <div className={styles.footer}>
-              <div className={styles.dragHandleContainer}>{isSortable && <DragHandle />}</div>
+            {!readOnly && (
+              <div className={styles.footer}>
+                <div className={styles.dragHandleContainer}>{isSortable && <DragHandle />}</div>
 
-              <div className={styles.functions}>
-                {!readOnly && (
+                <div className={styles.functions}>
                   <div>
                     <ValidationStatus
                       markers={scopedValidation}
                       placement="bottom"
                       showSummary={!value._ref}
                     />
                   </div>
-                )}
 
-                {value._ref && (
-                  <div>
-                    <IntentButton icon={LinkIcon} intent="edit" params={{id: value._ref}} />
-                  </div>
-                )}
+                  {value._ref && (
+                    <div>
+                      <IntentButton icon={LinkIcon} intent="edit" params={{id: value._ref}} />
+                    </div>
+                  )}
 
-                {!readOnly && (
                   <div>
                     <ConfirmButton
                       kind="simple"
@@ -302,9 +300,9 @@ export class ArrayInputGridItem extends React.PureComponent<ArrayInputGridItemPr
                       title="Remove this item"
                     />
                   </div>
-                )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </ContextProvidedChangeIndicator>
       </ChangeIndicatorScope>