misc responsive fixes

src/client/components/forms/DraggableSection/PositionPanel/index.scss

@@ -18,7 +18,7 @@
   }
 
   @include large-break {
-    padding-right: 0;
+    padding-right: $baseline;
 
     &__controls {
       padding-right: base(.75);
@@ -26,6 +26,6 @@
   }
 
   @include mid-break {
-    padding-right: 0;
+    padding-right: base(.5);
   }
 }

src/client/components/forms/FieldTypeGutter/index.scss

@@ -17,7 +17,9 @@ $controls-top-adjustment: base(.1);
 @include nestedStickyOffsets(4);
 
 .field-type-gutter {
-  padding-right: base(1.25);
+  &--left {
+    margin-right: base(1.25);
+  }
 
   &--right {
     padding-right: 0;
@@ -69,20 +71,15 @@ $controls-top-adjustment: base(.1);
   }
 
   @include mid-break {
-    padding-right: base(1);
+    &--left {
+      .field-type-gutter__content-container {
+        padding-right: $style-stroke-width-m;
+        padding-left: 0;
+      }
+    }
 
     &--right {
       padding-right: 0;
     }
   }
 }
-
-
-// External scopes
-.field-type.blocks {
-  .field-type-gutter {
-    &__content {
-      margin-top: - $controls-top-adjustment;
-    }
-  }
-}

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

@@ -1,10 +1,5 @@
 @import '../../../../scss/styles.scss';
 
-@mixin reduce-gutter {
-  padding-right: 0;
-  padding-left: 2px;
-}
-
 .group {
   margin-top: base(2);
   margin-bottom: base(2);
@@ -38,17 +33,5 @@
     &__fields-wrapper {
       display: flex;
     }
-
-    .field-type-gutter__content-container {
-      @include reduce-gutter;
-    }
-  }
-}
-
-.field-type.group .field-type.group,
-.field-type.blocks .field-type.group,
-.field-type.array .field-type.group {
-  .field-type-gutter__content-container {
-    @include reduce-gutter;
   }
 }

src/client/components/forms/field-types/RichText/RichText.js

@@ -151,78 +151,80 @@ const RichText = (props) => {
       }}
     >
       <FieldTypeGutter />
-      <Error
-        showError={showError}
-        message={errorMessage}
-      />
-      <Label
-        htmlFor={path}
-        label={label}
-        required={required}
-      />
-      <Slate
-        editor={editor}
-        value={value || defaultValue}
-        onChange={(val) => {
-          if (val !== defaultValue && val !== value) {
-            setValue(val);
-          }
-        }}
-      >
-        <div className={`${baseClass}__wrapper`}>
-          <div className={`${baseClass}__toolbar`}>
-            {elements.map((element, i) => {
-              const elementName = element?.name || element;
+      <div className={`${baseClass}__wrap`}>
+        <Error
+          showError={showError}
+          message={errorMessage}
+        />
+        <Label
+          htmlFor={path}
+          label={label}
+          required={required}
+        />
+        <Slate
+          editor={editor}
+          value={value || defaultValue}
+          onChange={(val) => {
+            if (val !== defaultValue && val !== value) {
+              setValue(val);
+            }
+          }}
+        >
+          <div className={`${baseClass}__wrapper`}>
+            <div className={`${baseClass}__toolbar`}>
+              {elements.map((element, i) => {
+                const elementName = element?.name || element;
 
-              const elementType = enabledElements[elementName];
-              const Button = elementType?.Button;
+                const elementType = enabledElements[elementName];
+                const Button = elementType?.Button;
 
-              if (Button) {
-                return (
-                  <Button
-                    key={i}
-                    path={path}
-                  />
-                );
-              }
-
-              return null;
-            })}
-            {leaves.map((leaf, i) => {
-              const leafName = leaf?.name || leaf;
-              const leafType = enabledLeaves[leafName];
-              const Button = leafType?.Button;
-
-              if (Button) {
-                return (
-                  <Button
-                    key={i}
-                    path={path}
-                  />
-                );
-              }
-
-              return null;
-            })}
-          </div>
-          <Editable
-            className={`${baseClass}__editor`}
-            renderElement={renderElement}
-            renderLeaf={renderLeaf}
-            placeholder={placeholder}
-            spellCheck
-            onKeyDown={(event) => {
-              Object.keys(hotkeys).forEach((hotkey) => {
-                if (isHotkey(hotkey, event)) {
-                  event.preventDefault();
-                  const mark = hotkeys[hotkey];
-                  toggleLeaf(editor, mark);
+                if (Button) {
+                  return (
+                    <Button
+                      key={i}
+                      path={path}
+                    />
+                  );
                 }
-              });
-            }}
-          />
-        </div>
-      </Slate>
+
+                return null;
+              })}
+              {leaves.map((leaf, i) => {
+                const leafName = leaf?.name || leaf;
+                const leafType = enabledLeaves[leafName];
+                const Button = leafType?.Button;
+
+                if (Button) {
+                  return (
+                    <Button
+                      key={i}
+                      path={path}
+                    />
+                  );
+                }
+
+                return null;
+              })}
+            </div>
+            <Editable
+              className={`${baseClass}__editor`}
+              renderElement={renderElement}
+              renderLeaf={renderLeaf}
+              placeholder={placeholder}
+              spellCheck
+              onKeyDown={(event) => {
+                Object.keys(hotkeys).forEach((hotkey) => {
+                  if (isHotkey(hotkey, event)) {
+                    event.preventDefault();
+                    const mark = hotkeys[hotkey];
+                    toggleLeaf(editor, mark);
+                  }
+                });
+              }}
+            />
+          </div>
+        </Slate>
+      </div>
     </div>
   );
 };

src/client/components/forms/field-types/RichText/index.scss

@@ -2,6 +2,7 @@
 
 .rich-text {
   margin-bottom: base(2);
+  display: flex;
 
   &__toolbar {
     display: flex;

src/client/components/forms/field-types/Row/index.scss

@@ -23,6 +23,8 @@
       margin-left: 0;
       margin-right: 0;
       width: 100% !important;
+      padding-left: 0;
+      padding-right: 0;
     }
   }
 }