From 4d59d0418797104db7b3515a79c11cfdc0248cdb Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Tue, 6 Sep 2022 22:53:45 +0200
Subject: [PATCH] Fix field margin issues

---
 ts/editor/EditorField.svelte  | 54 ++++++++++++++++++-----------------
 ts/editor/FieldsEditor.svelte |  6 ++++
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index f87104cd4..384d8e3d3 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -85,34 +85,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => api?.destroy());
 </script>
 
-<slot name="field-label" />
+<div class="field-container">
+    <slot name="field-label" />
 
-<Collapsible collapse={collapsed} let:collapsed={hidden}>
-    <div
-        use:elementResolve
-        class="editor-field"
-        on:focusin
-        on:focusout
-        on:mouseenter
-        on:mouseleave
-        {hidden}
-    >
-        <EditingArea
-            {content}
-            fontFamily={field.fontFamily}
-            fontSize={field.fontSize}
-            api={editingArea}
+    <Collapsible collapse={collapsed} let:collapsed={hidden}>
+        <div
+            use:elementResolve
+            class="editor-field"
+            on:focusin
+            on:focusout
+            on:mouseenter
+            on:mouseleave
+            {hidden}
         >
-            {#if flipInputs}
-                <slot name="plain-text-input" />
-                <slot name="rich-text-input" />
-            {:else}
-                <slot name="rich-text-input" />
-                <slot name="plain-text-input" />
-            {/if}
-        </EditingArea>
-    </div>
-</Collapsible>
+            <EditingArea
+                {content}
+                fontFamily={field.fontFamily}
+                fontSize={field.fontSize}
+                api={editingArea}
+            >
+                {#if flipInputs}
+                    <slot name="plain-text-input" />
+                    <slot name="rich-text-input" />
+                {:else}
+                    <slot name="rich-text-input" />
+                    <slot name="plain-text-input" />
+                {/if}
+            </EditingArea>
+        </div>
+    </Collapsible>
+</div>
 
 <style lang="scss">
     .editor-field {
diff --git a/ts/editor/FieldsEditor.svelte b/ts/editor/FieldsEditor.svelte
index 2a7222088..9969c8925 100644
--- a/ts/editor/FieldsEditor.svelte
+++ b/ts/editor/FieldsEditor.svelte
@@ -12,5 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         flex-direction: column;
         flex-grow: 1;
+
+        /* replace with "gap: 5px" once it's available
+           - required: Chromium 84 (Qt6 only) and iOS 14.1 */
+        > :global(*) {
+            margin: 5px 0;
+        }
     }
 </style>