Merge pull request #489 from creative-commoners/pulls/4.0/space-out

FIX Adjusting styles to fix some minor issues

client/src/components/ElementEditor/InlineEditForm.scss

@@ -1,10 +1,39 @@
 .element-editor-editform {
   margin-top: $spacer-xs;
-  @include make-row();
   cursor: auto;
 
+  // For some reason the form is not considered a "row" when above a certain media breakpoint
+  // We need this for the "stacked" form style
+  @include media-breakpoint-up(lg) {
+    @include make-row()
+  }
+
+  // Counteract the margin that is added to the bottom of each form group
+  margin-bottom: -1rem;
+
+  // Force tinymce to have proper box-sizing
+  .mce-tinymce {
+    box-sizing: border-box;
+  }
+
+  // The form div itself receives some width styling that we prefer to be handled by
+  // field holder styling as below
+  &__form {
+    width: 100%;
+  }
+
   .form-group {
     margin-left: 0;
     margin-right: 0;
   }
+
+  // Specificity overrides for styles provided by admin.
+  // Designs mandate that we're going with a "stacked" style here which doesn't currently
+  // translate very well to higher width
+  & &__form {
+    & .form-group .form__field-holder {
+      flex: 1 0 100%;
+      max-width: 900px;
+    }
+  }
 }

src/Controllers/ElementalAreaController.php

@@ -96,6 +96,8 @@ public function getElementForm($elementID)
             $form->makeReadonly();
         }
 
+        $form->addExtraClass('element-editor-editform__form');
+
         return $form;
     }