From 8ad65d40fff9c035cdf885ad426e51feace54d51 Mon Sep 17 00:00:00 2001
From: RumovZ <gp5glkw78@relay.firefox.com>
Date: Wed, 1 May 2024 12:08:19 +0200
Subject: [PATCH] Clean up #3167 (#3186)

* Revert changes to ButtonToolbar from #3167

Flex gap is still not fully supported.
Keeps a small margin increase.

* Add margin to deck config header

* Move StickyHeader into import-page
---
 ts/lib/components/ButtonToolbar.svelte        |  7 +++++-
 ts/routes/deck-options/ConfigSelector.svelte  | 22 +++++++++++++++----
 ts/routes/import-page/ImportPage.svelte       |  2 +-
 .../import-page}/StickyHeader.svelte          |  8 +++----
 4 files changed, 29 insertions(+), 10 deletions(-)
 rename ts/{lib/components => routes/import-page}/StickyHeader.svelte (82%)

diff --git a/ts/lib/components/ButtonToolbar.svelte b/ts/lib/components/ButtonToolbar.svelte
index 69a64b2f4..3ddb379d6 100644
--- a/ts/lib/components/ButtonToolbar.svelte
+++ b/ts/lib/components/ButtonToolbar.svelte
@@ -39,6 +39,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .button-toolbar {
         flex-wrap: var(--buttons-wrap);
         padding-left: 0.15rem;
-        gap: 1rem;
+
+        :global(.button-group) {
+            /* TODO replace with gap once available (blocked by Qt5 / Chromium 77) */
+            margin-right: 0.3rem;
+            margin-bottom: 0.15rem;
+        }
     }
 </style>
diff --git a/ts/routes/deck-options/ConfigSelector.svelte b/ts/routes/deck-options/ConfigSelector.svelte
index 50eedaaaa..d2b9dfca9 100644
--- a/ts/routes/deck-options/ConfigSelector.svelte
+++ b/ts/routes/deck-options/ConfigSelector.svelte
@@ -8,7 +8,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type Modal from "bootstrap/js/dist/modal";
     import { createEventDispatcher, getContext } from "svelte";
 
-    import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
     import { modalsKey } from "$lib/components/context-keys";
     import Select from "$lib/components/Select.svelte";
     import StickyContainer from "$lib/components/StickyContainer.svelte";
@@ -93,9 +92,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <StickyContainer --gutter-block="0.5rem" --sticky-borders="0 0 1px" breakpoint="sm">
-    <ButtonToolbar class="justify-content-between flex-grow-1" wrap={false}>
+    <div class="button-bar">
         <Select
-            class="flex-grow-1"
+            class="flex-grow-1 mr1"
             bind:value
             {label}
             list={$configList}
@@ -113,5 +112,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:rename={promptToRename}
             on:remove={dispatchPresetChange}
         />
-    </ButtonToolbar>
+    </div>
 </StickyContainer>
+
+<style lang="scss">
+    .button-bar {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+
+        flex-grow: 1;
+    }
+
+    /* TODO replace with gap once available (blocked by Qt5 / Chromium 77) */
+    :global(.mr1) {
+        margin-right: 1rem;
+    }
+</style>
diff --git a/ts/routes/import-page/ImportPage.svelte b/ts/routes/import-page/ImportPage.svelte
index f04f51472..f3aec8f66 100644
--- a/ts/routes/import-page/ImportPage.svelte
+++ b/ts/routes/import-page/ImportPage.svelte
@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import BackendProgressIndicator from "$lib/components/BackendProgressIndicator.svelte";
     import Container from "$lib/components/Container.svelte";
     import ErrorPage from "$lib/components/ErrorPage.svelte";
-    import StickyHeader from "$lib/components/StickyHeader.svelte";
+    import StickyHeader from "./StickyHeader.svelte";
 
     import ImportLogPage from "./ImportLogPage.svelte";
 
diff --git a/ts/lib/components/StickyHeader.svelte b/ts/routes/import-page/StickyHeader.svelte
similarity index 82%
rename from ts/lib/components/StickyHeader.svelte
rename to ts/routes/import-page/StickyHeader.svelte
index 54abfb0aa..420b46251 100644
--- a/ts/lib/components/StickyHeader.svelte
+++ b/ts/routes/import-page/StickyHeader.svelte
@@ -6,10 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { getPlatformString } from "@tslib/shortcuts";
 
-    import LabelButton from "./LabelButton.svelte";
-    import Shortcut from "./Shortcut.svelte";
-    import StickyContainer from "./StickyContainer.svelte";
-    import ButtonToolbar from "./ButtonToolbar.svelte";
+    import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
+    import LabelButton from "$lib/components/LabelButton.svelte";
+    import Shortcut from "$lib/components/Shortcut.svelte";
+    import StickyContainer from "$lib/components/StickyContainer.svelte";
 
     export let path: string;
     export let onImport: () => void;