Fix Draftail editor fallback layout in .full fields

client/src/components/Draftail/EditorFallback/EditorFallback.js

@@ -107,25 +107,28 @@ class EditorFallback extends PureComponent {
         </div>
 
         <div className="DraftEditor-root">
-          <div className="public-DraftEditorPlaceholder-inner">
-            {STRINGS.EDITOR_CRASH}
+          <div className="public-DraftEditor-content">
+            <div className="public-DraftEditorPlaceholder-inner">
+              {STRINGS.EDITOR_CRASH}
+
+              {showContent && (
+                <textarea
+                  className="EditorFallback__textarea"
+                  value={content}
+                  readOnly
+                />
+              )}
+
+              {showError && (
+                <pre className="help-block help-critical">
+                  <code className="EditorFallback__error">
+                    {`${error.stack}\n${info.componentStack}`}
+                  </code>
+                </pre>
+              )}
+            </div>
           </div>
         </div>
-
-        {showContent && (
-          <textarea
-            className="EditorFallback__textarea"
-            value={content}
-            readOnly
-          />
-        )}
-        {showError && (
-          <pre className="help-block help-critical">
-            <code className="EditorFallback__error">
-              {`${error.stack}\n${info.componentStack}`}
-            </code>
-          </pre>
-        )}
       </div>
     );
   }

client/src/components/Draftail/EditorFallback/EditorFallback.scss

@@ -1,6 +1,19 @@
 .EditorFallback__textarea {
-    resize: vertical;
     min-height: 150px;
+    margin-top: 1rem;
+    resize: vertical;
+}
+
+// Override over-reaching styles definition for all textareas in full fields.
+@mixin wagtail-textarea-overrides {
+    padding: 1rem;
+    border-width: 1px;
+    border-radius: 6px;
+}
+
+.EditorFallback__textarea,
+.object.full .EditorFallback__textarea {
+    @include wagtail-textarea-overrides;
 }
 
 .EditorFallback__error {

client/src/components/Draftail/EditorFallback/__snapshots__/EditorFallback.test.js.snap

@@ -33,16 +33,20 @@ exports[`EditorFallback #error #showContent 1`] = `
     className="DraftEditor-root"
   >
     <div
-      className="public-DraftEditorPlaceholder-inner"
+      className="public-DraftEditor-content"
     >
-      The editor just crashed. Content has been reset to the last saved version.
+      <div
+        className="public-DraftEditorPlaceholder-inner"
+      >
+        The editor just crashed. Content has been reset to the last saved version.
+        <textarea
+          className="EditorFallback__textarea"
+          readOnly={true}
+          value="test"
+        />
+      </div>
     </div>
   </div>
-  <textarea
-    className="EditorFallback__textarea"
-    readOnly={true}
-    value="test"
-  />
 </div>
 `;
 
@@ -72,21 +76,25 @@ exports[`EditorFallback #error #showError 1`] = `
     className="DraftEditor-root"
   >
     <div
-      className="public-DraftEditorPlaceholder-inner"
+      className="public-DraftEditor-content"
     >
-      The editor just crashed. Content has been reset to the last saved version.
+      <div
+        className="public-DraftEditorPlaceholder-inner"
+      >
+        The editor just crashed. Content has been reset to the last saved version.
+        <pre
+          className="help-block help-critical"
+        >
+          <code
+            className="EditorFallback__error"
+          >
+            test stack
+test
+          </code>
+        </pre>
+      </div>
     </div>
   </div>
-  <pre
-    className="help-block help-critical"
-  >
-    <code
-      className="EditorFallback__error"
-    >
-      test stack
-test
-    </code>
-  </pre>
 </div>
 `;
 
@@ -118,9 +126,13 @@ exports[`EditorFallback #error works 1`] = `
     className="DraftEditor-root"
   >
     <div
-      className="public-DraftEditorPlaceholder-inner"
+      className="public-DraftEditor-content"
     >
-      The editor just crashed. Content has been reset to the last saved version.
+      <div
+        className="public-DraftEditorPlaceholder-inner"
+      >
+        The editor just crashed. Content has been reset to the last saved version.
+      </div>
     </div>
   </div>
 </div>