From 3abe6168aabb1a8c6cd6459918a0ef734fc9aed4 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 18 Apr 2021 13:02:33 +1000
Subject: [PATCH] tweak deckconfig top area formatting

I suspect there's a better way to ensure selector and save button are
shown on the same line on both large and small widths; PRs are welcome.
---
 ts/deckconfig/ConfigEditor.svelte   |  4 ++++
 ts/deckconfig/ConfigSelector.svelte | 16 ++++++++++------
 ts/deckconfig/DeckConfigPage.svelte |  8 ++------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/ts/deckconfig/ConfigEditor.svelte b/ts/deckconfig/ConfigEditor.svelte
index e02d7182d..c01f1420b 100644
--- a/ts/deckconfig/ConfigEditor.svelte
+++ b/ts/deckconfig/ConfigEditor.svelte
@@ -17,6 +17,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     :global(h2) {
         margin-top: 1em;
     }
+
+    :global(input, select) {
+        font-size: 16px;
+    }
 </style>
 
 <div>
diff --git a/ts/deckconfig/ConfigSelector.svelte b/ts/deckconfig/ConfigSelector.svelte
index 138f62b6e..b39dcdaac 100644
--- a/ts/deckconfig/ConfigSelector.svelte
+++ b/ts/deckconfig/ConfigSelector.svelte
@@ -23,7 +23,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .form-select {
         display: inline-block;
-        width: 70%;
+        grid-row: 2;
+        grid-column: 1 / 4;
     }
 
     .outer {
@@ -40,10 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .inner {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
         width: 35em;
-
+        grid-template-columns: 1fr 1fr 1fr 1fr;
         & > :global(*) {
             padding-left: 0.5em;
             padding-right: 0.5em;
@@ -57,7 +57,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div class="outer">
     <div class="inner">
-        <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
+        <div style="grid-column: 1 / 4;">
+            {tr.actionsOptionsFor({ val: state.currentDeck.name })}
+        </div>
 
         <!-- svelte-ignore a11y-no-onchange -->
         <select class="form-select" on:change={blur}>
@@ -68,7 +70,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             {/each}
         </select>
 
-        <OptionsDropdown {state} />
+        <div style="grid-row: 2; align-items: right;">
+            <OptionsDropdown {state} />
+        </div>
     </div>
 </div>
 
diff --git a/ts/deckconfig/DeckConfigPage.svelte b/ts/deckconfig/DeckConfigPage.svelte
index cd7c764bf..f85fb2b13 100644
--- a/ts/deckconfig/DeckConfigPage.svelte
+++ b/ts/deckconfig/DeckConfigPage.svelte
@@ -19,20 +19,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .inner {
         padding: 0.5em;
     }
-
-    :global(input, select) {
-        font-size: 16px;
-    }
 </style>
 
 <div id="modal">
     <!-- filled in later-->
 </div>
 
+<ConfigSelector {state} />
+
 <div class="outer">
     <div class="inner">
-        <ConfigSelector {state} />
-
         <ConfigEditor {state} />
     </div>
 </div>