Make grid at least have 4 elements + shadow instead of scale (codesandbox#4056)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx

@@ -77,7 +77,7 @@ export const SandboxCard = ({ sandbox, isTemplate = false, ...props }) => {
         transitionDuration: theme => theme.speeds[4],
         ':hover, :focus, :focus-within': {
           cursor: edit ? 'normal' : 'pointer',
-          transform: 'scale(0.98)',
+          boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900],
         },
       })}
       {...props}

packages/app/src/app/pages/NewDashboard/Components/SandboxGrid/index.tsx

@@ -2,15 +2,25 @@ import React from 'react';
 import { Grid } from '@codesandbox/components';
 import css from '@styled-system/css';
 
-export const SandboxGrid = props => (
-  <Grid
-    rowGap={6}
-    columnGap={6}
-    marginBottom={8}
-    css={css({
-      gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-    })}
-  >
-    {props.children}
-  </Grid>
-);
+export const SandboxGrid = props => {
+  const numberOfItems = React.Children.toArray(props.children).filter(
+    React.isValidElement
+  ).length;
+
+  return (
+    <Grid
+      rowGap={6}
+      columnGap={6}
+      marginBottom={8}
+      css={css({
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+      })}
+    >
+      {props.children}
+      {numberOfItems < 4
+        ? // fill with empty divs to always maintain 4 elements in a group
+          Array.from(Array(4 - numberOfItems).keys()).map(n => <div key={n} />)
+        : null}
+    </Grid>
+  );
+};