Fix DeckOptions toolbar having wrong margins and no flex-grow (#1464)

ButtonToolbar.svelte now has to assume that the button elements
are two levels below it. This can be simplified once we can use
flex-gap.

ts/components/ButtonGroupItem.svelte

@@ -58,8 +58,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <!-- div is necessary to preserve item position -->
-<div {id} {style}>
+<div {id} class="button-group-item" {style}>
     <Detachable {detached}>
         <slot />
     </Detachable>
 </div>
+
+<style lang="scss">
+    .button-group-item {
+        display: contents;
+    }
+</style>

ts/components/ButtonToolbar.svelte

@@ -103,8 +103,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     .button-toolbar {
         flex-wrap: var(--buttons-wrap);
+        padding: 0.15rem 0;
 
-        > :global(*) {
+        > :global(*) > :global(*) {
             /* TODO replace with gap once available */
             margin-right: 0.15rem;
             margin-bottom: 0.15rem;

ts/components/Container.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api: Record<string, never> | undefined = undefined;
 </script>
 
-<div {id} class={`container mb-1 ${className}`}>
+<div {id} class="container {className}">
     <Section {api}>
         <slot />
     </Section>

ts/components/Item.svelte

@@ -35,8 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    /* TODO reactivate this once we can use CSS gap */
+    .item {
-    /* .item { */
+        display: contents;
-    /*     display: contents; */
+    }
-    /* } */
 </style>

ts/components/StickyFooter.svelte

@@ -10,12 +10,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let height: number = 0;
 </script>
 
-<footer {id} bind:offsetHeight={height} class="container-fluid pt-1 {className}">
+<footer {id} bind:offsetHeight={height} class="sticky-footer {className}">
     <slot />
 </footer>
 
 <style lang="scss">
-    footer {
+    .sticky-footer {
         position: sticky;
         left: 0;
         right: 0;

ts/components/StickyHeader.svelte

@@ -8,12 +8,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 </script>
 
-<header {id} class="container-fluid pb-1 {className}">
+<header {id} class="sticky-header container-fluid {className}">
     <slot />
 </header>
 
 <style lang="scss">
-    header {
+    .sticky-header {
         position: sticky;
         left: 0;
         right: 0;

ts/deck-options/ConfigSelector.svelte

@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Item from "../components/Item.svelte";
     import ButtonGroup from "../components/ButtonGroup.svelte";
     import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
+    import Container from "../components/Container.svelte";
 
     import SelectButton from "../components/SelectButton.svelte";
     import SelectOption from "../components/SelectOption.svelte";
@@ -88,31 +89,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <StickyHeader class="g-1">
-    <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
+    <Container>
-        <Item>
+        <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
-            <ButtonGroup class="flex-grow-1">
+            <Item>
-                <ButtonGroupItem>
+                <ButtonGroup class="flex-grow-1">
-                    <SelectButton class="flex-grow-1" on:change={blur}>
+                    <ButtonGroupItem>
-                        {#each $configList as entry}
+                        <SelectButton class="flex-grow-1" on:change={blur}>
-                            <SelectOption
+                            {#each $configList as entry}
-                                value={String(entry.idx)}
+                                <SelectOption
-                                selected={entry.current}
+                                    value={String(entry.idx)}
-                            >
+                                    selected={entry.current}
-                                {configLabel(entry)}
+                                >
-                            </SelectOption>
+                                    {configLabel(entry)}
-                        {/each}
+                                </SelectOption>
-                    </SelectButton>
+                            {/each}
-                </ButtonGroupItem>
+                        </SelectButton>
-            </ButtonGroup>
+                    </ButtonGroupItem>
-        </Item>
+                </ButtonGroup>
+            </Item>
 
-        <Item>
+            <Item>
-            <SaveButton
+                <SaveButton
-                {state}
+                    {state}
-                on:add={promptToAdd}
+                    on:add={promptToAdd}
-                on:clone={promptToClone}
+                    on:clone={promptToClone}
-                on:rename={promptToRename}
+                    on:rename={promptToRename}
-            />
+                />
-        </Item>
+            </Item>
-    </ButtonToolbar>
+        </ButtonToolbar>
+    </Container>
 </StickyHeader>