fix: grid layout

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

src/Grid/Grid.scss

@@ -6,7 +6,6 @@
   &-layout {
     position: relative;
     display: flex;
-    align-items: center;
     @include mobile {
       padding-top: 48px;
       flex-direction: column;
@@ -15,45 +14,38 @@
   }
 
   &-rows {
-    margin: -16px;
     flex: 1;
     display: flex;
     flex-direction: column;
-    @include mobile {
-      margin: 0;
-    }
   }
 
   &-icon {
     margin-right: 32px;
     display: inline-flex;
-    align-items: flex-start;
+    align-self: flex-start;
     @include mobile {
       position: absolute;
       top: 8px;
       left: 12px;
     }
 
-    &.-top {
-      align-self: flex-start;
-      position: relative;
-      top: -12px;
-    }
-
     picture, img, svg {
       width: 80px;
-      height: auto;
+      height: 80px;
       vertical-align: top;
       @include mobile {
         width: 32px;
+        height: 32px;
       }
     }
   }
 
   &-action {
+    margin-top: 16px;
     margin-left: 32px;
     width: 48px;
     height: 48px;
+    align-self: flex-start;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -63,12 +55,6 @@
       right: 0;
       margin: 0;
     }
-
-    &.-top {
-      align-self: flex-start;
-      position: relative;
-      top: -12px;
-    }
   }
 
   &-notification {

src/Grid/Grid.tsx

@@ -11,20 +11,15 @@ const Grid: React.FC<Grid> = (props) => {
   const { icon, action, notification, children, className, ...other } = props;
   let gridClassNames = 'grid';
   if (className) gridClassNames += ` ${className}`;
-  const rowsCount = React.Children.count(children);
-  let gridActionClassNames = 'grid-action';
-  let gridIconClassNames = 'grid-icon';
-  if (rowsCount > 1) gridActionClassNames += ' -top';
-  if (rowsCount > 1) gridIconClassNames += ' -top';
 
   return (
     <Panel {...other} className={gridClassNames}>
       <div className="grid-layout">
-        {icon && <div className={gridIconClassNames}>{icon}</div>}
+        {icon && <div className="grid-icon">{icon}</div>}
         <div className="grid-rows">
           {children}
         </div>
-        <div className={gridActionClassNames}>{action}</div>
+        <div className="grid-action">{action}</div>
       </div>
       {notification && <div className="grid-notification">{notification}</div>}
     </Panel>

src/GridCell/GridCell.scss

@@ -1,9 +1,8 @@
 .gridCell {
-  margin: 16px;
+  padding: 12px;
   flex: 0;
   word-break: break-word;
   @include mobile {
-    margin: 0;
     padding: 8px 12px;
     display: flex;
     font-size: 14px;