adds column width approach so fields can be less than full width

src/components/field-types/Group/index.scss

@@ -2,7 +2,7 @@
 
 .field-group {
   @extend %shadow;
-  margin: rem(1) 0;
+  margin: rem(1) rem(.5);
 
   header,
   .content {
@@ -16,4 +16,9 @@
       margin-bottom: 0;
     }
   }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }

src/components/field-types/Input/index.js

@@ -32,7 +32,10 @@ const validate = (value, type) => {
 
 const Input = props => {
   return (
-    <div className={props.className} style={props.style}>
+    <div className={props.className} style={{
+      ...props.style,
+      width: props.width ? `${props.width}%` : null
+    }}>
       {props.error}
       {props.label}
       <input

src/components/field-types/fieldType/index.scss

@@ -1,8 +1,10 @@
 @import '~payload/scss/styles';
 
 .field-type {
+  @include gutter;
   margin-bottom: rem(.5);
   position: relative;
+  width: 100%;
 
   label {
     display: flex;

src/components/forms/Form/index.scss

@@ -1,8 +1,7 @@
 @import '~payload/scss/styles';
 
 form {
-  display: flex;
-  flex-wrap: wrap;
+  @include row;
 
   > * {
     width: 100%;

src/components/modules/Filter/index.js

@@ -4,7 +4,7 @@ import { Form, Input } from 'payload/components';
 class Filter extends Component {
   render() {
     return (
-      <Form>
+      <Form className="filter">
         <Input placeholder="Search" type="text" name="keywords" />
       </Form>
     );

src/components/modules/StickyAction/index.scss

@@ -1,6 +1,7 @@
 @import '~payload/scss/styles';
 
 .sticky.action {
+  @include gutter;
   display: flex;
   justify-content: space-between;
 

src/components/views/collections/Edit/index.js

@@ -5,8 +5,7 @@ import './index.scss';
 
 const EditView = props => {
 
-  const isEditing = props.slug ? true : false;
-
+  const isEditing = props.data && props.data.slug ? true : false;
   const nav = [{
       url: `/collections/${props.collection.slug}`,
       label: props.collection.label
@@ -14,7 +13,7 @@ const EditView = props => {
 
   if (isEditing) {
     nav.push({
-      url: `/collections/${props.collection.slug}/${props.slug}`,
+      url: `/collections/${props.collection.slug}/${props.data.slug}`,
       label: props.data ? props.data[props.collection.uid] : ''
     })
   } else {

src/scss/grid.scss

@@ -6,7 +6,6 @@
 
 // Gutter
 $gutter : rem(.5);
-$cols   : 12;
 
 /////////////////////////////
 // ROWS
@@ -20,20 +19,10 @@ $cols   : 12;
 }
 
 /////////////////////////////
-// COLUMN SETUP
+// GUTTER SETUP
 /////////////////////////////
 
 @mixin gutter {
-  margin-left: $gutter;
-  margin-right: $gutter;
-}
-
-@mixin col($col) {
-  @include gutter;
-  width: calc(#{$col / $cols * 100 + %} - #{rem(1.01)});
-}
-
-@mixin push($col) {
-  margin-right: $gutter;
-  margin-left: calc(#{$col / $cols * 100 + %} + #{$gutter});
+  padding-left: $gutter;
+  padding-right: $gutter;
 }

src/scss/structure.scss

@@ -6,8 +6,8 @@
 /////////////////////////////
 
 @mixin default-template-width {
-  padding-left: rem(1);
-  padding-right: rem(1);
+  padding-left: $base;
+  padding-right: $base;
   margin-left: rem(6);
   width: calc(100% - #{rem(6)});