responsive edit view

src/client/components/elements/Button/index.scss

@@ -11,6 +11,7 @@
   cursor: pointer;
   font-weight: normal;
   text-decoration: none;
+  text-align: center;
 
   span {
     line-height: base(1);

src/client/components/elements/Eyebrow/index.scss

@@ -14,5 +14,6 @@
     padding: 0 0 $baseline;
     margin: 0;
     position: static;
+    display: block;
   }
 }

src/client/components/elements/StepNav/index.scss

@@ -8,7 +8,7 @@
   }
 
   a {
-    margin-right: base(.35);
+    margin-right: base(.25);
     border: 0;
     display: flex;
     align-items: center;
@@ -16,7 +16,7 @@
     text-decoration: none;
 
     svg {
-      margin-left: base(.35);
+      margin-left: base(.25);
       transform: rotate(-90deg);
     }
 
@@ -29,8 +29,11 @@
     }
   }
 
-  .label {
-    color: $color-gray;
+  span {
+    max-width: base(6);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   @include mid-break {

src/client/components/views/collections/Edit/Default.js

@@ -25,13 +25,13 @@ const DefaultEditView = (props) => {
 
   const {
     slug,
-    preview,
     fields,
     labels: {
       singular: singularLabel,
     },
     useAsTitle,
     timestamps,
+    preview,
   } = collection;
 
   return (
@@ -81,7 +81,7 @@ const DefaultEditView = (props) => {
           </div>
         </div>
         <div className={`${baseClass}__sidebar`}>
-          <div className={`${baseClass}__document-actions`}>
+          <div className={`${baseClass}__document-actions${preview ? ` ${baseClass}__document-actions--with-preview` : ''}`}>
             <PreviewButton generatePreviewURL={preview} />
             <FormSubmit>Save</FormSubmit>
           </div>

src/client/components/views/collections/Edit/index.scss

@@ -8,15 +8,6 @@
     align-items: flex-start;
   }
 
-  &__main {
-    flex-grow: 1;
-  }
-
-  &__eyebrow {
-    padding: base(1.5) 0;
-    display: flex;
-  }
-
   &__header {
     h1 {
       word-break: break-all;
@@ -31,7 +22,7 @@
     display: flex;
 
     li {
-      margin-left: $baseline;
+      margin-left: base(.75);
     }
   }
 
@@ -49,13 +40,36 @@
 
   &__document-actions,
   &__meta {
-    padding-left: base(2);
+    padding-left: base(1.5);
   }
 
   &__document-actions {
     @include blur-bg;
     position: sticky;
     top: 0;
+    padding-right: $baseline;
+
+    .form-submit {
+      .btn {
+        width: 100%;
+      }
+    }
+  }
+
+  &__document-actions--with-preview {
+    display: flex;
+
+    > * {
+      width: calc(50% - #{base(.5)});
+    }
+
+    > *:first-child {
+      margin-right: base(.5);
+    }
+
+    > *:last-child {
+      margin-left: base(.5);
+    }
   }
 
   &__meta {
@@ -76,4 +90,37 @@
       padding: base(4);
     }
   }
+
+  @include mid-break {
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding: $baseline;
+      margin-bottom: $baseline;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+    }
+
+    &__document-actions,
+    &__meta {
+      padding-left: $baseline;
+    }
+
+    &__collection-actions {
+      margin-top: base(.5);
+      padding-left: $baseline;
+
+      li {
+        margin: 0 base(.5) 0 0;
+      }
+    }
+  }
 }