Add Container.svelte

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>

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>

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>

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>
+
+    <Section {api}>
         <slot />
+    </Section>
 </div>
 
 <style lang="scss">