From afc56a8398e47a3283ca5d011dc31094994888b9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 28 Oct 2021 11:37:52 +0200
Subject: [PATCH] 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  |  8 +++-
 ts/components/ButtonToolbar.svelte    |  3 +-
 ts/components/Container.svelte        |  2 +-
 ts/components/Item.svelte             |  7 ++--
 ts/components/StickyFooter.svelte     |  4 +-
 ts/components/StickyHeader.svelte     |  4 +-
 ts/deck-options/ConfigSelector.svelte | 55 ++++++++++++++-------------
 7 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index f0d0bc17f..20e51698f 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/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>
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index f2d5c81cb..4310abfc2 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/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;
diff --git a/ts/components/Container.svelte b/ts/components/Container.svelte
index e27da6103..006787989 100644
--- a/ts/components/Container.svelte
+++ b/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>
diff --git a/ts/components/Item.svelte b/ts/components/Item.svelte
index af86b9bb9..352542b33 100644
--- a/ts/components/Item.svelte
+++ b/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 { */
-    /*     display: contents; */
-    /* } */
+    .item {
+        display: contents;
+    }
 </style>
diff --git a/ts/components/StickyFooter.svelte b/ts/components/StickyFooter.svelte
index dd99d3e0e..57bea80ce 100644
--- a/ts/components/StickyFooter.svelte
+++ b/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;
diff --git a/ts/components/StickyHeader.svelte b/ts/components/StickyHeader.svelte
index 8e5319c7a..053c942a0 100644
--- a/ts/components/StickyHeader.svelte
+++ b/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;
diff --git a/ts/deck-options/ConfigSelector.svelte b/ts/deck-options/ConfigSelector.svelte
index d1a14b5f6..d5568c0e2 100644
--- a/ts/deck-options/ConfigSelector.svelte
+++ b/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}>
-        <Item>
-            <ButtonGroup class="flex-grow-1">
-                <ButtonGroupItem>
-                    <SelectButton class="flex-grow-1" on:change={blur}>
-                        {#each $configList as entry}
-                            <SelectOption
-                                value={String(entry.idx)}
-                                selected={entry.current}
-                            >
-                                {configLabel(entry)}
-                            </SelectOption>
-                        {/each}
-                    </SelectButton>
-                </ButtonGroupItem>
-            </ButtonGroup>
-        </Item>
+    <Container>
+        <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
+            <Item>
+                <ButtonGroup class="flex-grow-1">
+                    <ButtonGroupItem>
+                        <SelectButton class="flex-grow-1" on:change={blur}>
+                            {#each $configList as entry}
+                                <SelectOption
+                                    value={String(entry.idx)}
+                                    selected={entry.current}
+                                >
+                                    {configLabel(entry)}
+                                </SelectOption>
+                            {/each}
+                        </SelectButton>
+                    </ButtonGroupItem>
+                </ButtonGroup>
+            </Item>
 
-        <Item>
-            <SaveButton
-                {state}
-                on:add={promptToAdd}
-                on:clone={promptToClone}
-                on:rename={promptToRename}
-            />
-        </Item>
-    </ButtonToolbar>
+            <Item>
+                <SaveButton
+                    {state}
+                    on:add={promptToAdd}
+                    on:clone={promptToClone}
+                    on:rename={promptToRename}
+                />
+            </Item>
+        </ButtonToolbar>
+    </Container>
 </StickyHeader>