From 2728b5fa63a54c0116a3244b72c42dadb621d507 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 29 May 2021 17:01:56 +0200
Subject: [PATCH] Add Container.svelte

---
 ts/components/Container.svelte        | 19 +++++++++++++++++++
 ts/components/Section.svelte          | 10 +++++++---
 ts/deckoptions/ConfigEditor.svelte    |  6 +++---
 ts/deckoptions/TitledContainer.svelte |  8 +++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 ts/components/Container.svelte

diff --git a/ts/components/Container.svelte b/ts/components/Container.svelte
new file mode 100644
index 000000000..e27da6103
--- /dev/null
+++ b/ts/components/Container.svelte
@@ -0,0 +1,19 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import Section from "./Section.svelte";
+
+    export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+
+    export let api: Record<string, never> | undefined = undefined;
+</script>
+
+<div {id} class={`container mb-1 ${className}`}>
+    <Section {api}>
+        <slot />
+    </Section>
+</div>
diff --git a/ts/components/Section.svelte b/ts/components/Section.svelte
index 8d722b07a..92279f014 100644
--- a/ts/components/Section.svelte
+++ b/ts/components/Section.svelte
@@ -13,8 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { makeInterface } from "./registration";
 
     export let id: string | undefined = undefined;
-    let className: string = "";
-    export { className as class };
 
     function makeRegistration(): Registration {
         const detach = writable(false);
@@ -55,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div bind:this={sectionRef} {id} class={`container mb-1 ${className}`}>
+<div bind:this={sectionRef} {id}>
     <slot />
     {#each $dynamicItems as item}
         <SectionItem id={item[0].id} registration={item[1]}>
@@ -63,3 +61,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </SectionItem>
     {/each}
 </div>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
diff --git a/ts/deckoptions/ConfigEditor.svelte b/ts/deckoptions/ConfigEditor.svelte
index be2a5729f..a91c1fe14 100644
--- a/ts/deckoptions/ConfigEditor.svelte
+++ b/ts/deckoptions/ConfigEditor.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Section from "components/Section.svelte";
+    import Container from "components/Container.svelte";
     import SectionItem from "components/SectionItem.svelte";
 
     import DailyLimits from "./DailyLimits.svelte";
@@ -21,7 +21,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let options: Record<string, never>;
 </script>
 
-<Section api={options}>
+<Container api={options}>
     <SectionItem>
         <DailyLimits {state} />
     </SectionItem>
@@ -54,4 +54,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <SectionItem>
         <AdvancedOptions {state} />
     </SectionItem>
-</Section>
+</Container>
diff --git a/ts/deckoptions/TitledContainer.svelte b/ts/deckoptions/TitledContainer.svelte
index aa762e161..03c669f36 100644
--- a/ts/deckoptions/TitledContainer.svelte
+++ b/ts/deckoptions/TitledContainer.svelte
@@ -3,12 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Section from "components/Section.svelte";
+
     export let title: string;
+    export let api: Record<string, never> | undefined = undefined;
 </script>
 
 <div class="container-fluid my-4">
     <h1>{title}</h1>
-    <slot />
+
+    <Section {api}>
+        <slot />
+    </Section>
 </div>
 
 <style lang="scss">