From 7dc131c3de4a5cfe5e623cfb7426673e8003149c Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 22 Apr 2021 11:33:27 +1000
Subject: [PATCH] minor layout tweaks to deck conf screen

- more space for dropdown
- limit width of main area so popups wrap correctly
- experiment with different colour dropdown
---
 ts/deckconfig/ConfigSelector.svelte  | 43 +++++++++++-----------------
 ts/deckconfig/DeckConfigPage.svelte  |  5 ++--
 ts/deckconfig/OptionsDropdown.svelte |  2 +-
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/ts/deckconfig/ConfigSelector.svelte b/ts/deckconfig/ConfigSelector.svelte
index b39dcdaac..c018eac28 100644
--- a/ts/deckconfig/ConfigSelector.svelte
+++ b/ts/deckconfig/ConfigSelector.svelte
@@ -22,12 +22,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .form-select {
-        display: inline-block;
-        grid-row: 2;
-        grid-column: 1 / 4;
+        grid-column: 1 / 5;
     }
 
-    .outer {
+    .fixed-bar {
         position: fixed;
         z-index: 1;
         top: 0;
@@ -35,19 +33,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: 100%;
         color: var(--text-fg);
         background: var(--window-bg);
-        padding: 0.5em;
         display: flex;
         justify-content: center;
     }
 
-    .inner {
+    .grid {
         display: grid;
-        width: 35em;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        & > :global(*) {
-            padding-left: 0.5em;
-            padding-right: 0.5em;
-        }
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-column-gap: 0.5em;
     }
 
     .padding {
@@ -55,22 +48,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div class="outer">
-    <div class="inner">
-        <div style="grid-column: 1 / 4;">
-            {tr.actionsOptionsFor({ val: state.currentDeck.name })}
-        </div>
+<div class="fixed-bar">
+    <div class="width-limited">
+        <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
 
-        <!-- svelte-ignore a11y-no-onchange -->
-        <select class="form-select" on:change={blur}>
-            {#each $configList as entry}
-                <option value={entry.idx} selected={entry.current}>
-                    {configLabel(entry)}
-                </option>
-            {/each}
-        </select>
+        <div class="grid">
+            <!-- svelte-ignore a11y-no-onchange -->
+            <select class="form-select" on:change={blur}>
+                {#each $configList as entry}
+                    <option value={entry.idx} selected={entry.current}>
+                        {configLabel(entry)}
+                    </option>
+                {/each}
+            </select>
 
-        <div style="grid-row: 2; align-items: right;">
             <OptionsDropdown {state} />
         </div>
     </div>
diff --git a/ts/deckconfig/DeckConfigPage.svelte b/ts/deckconfig/DeckConfigPage.svelte
index f85fb2b13..d427118f5 100644
--- a/ts/deckconfig/DeckConfigPage.svelte
+++ b/ts/deckconfig/DeckConfigPage.svelte
@@ -16,7 +16,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         justify-content: center;
     }
 
-    .inner {
+    :global(.width-limited) {
+        width: 40em;
         padding: 0.5em;
     }
 </style>
@@ -28,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ConfigSelector {state} />
 
 <div class="outer">
-    <div class="inner">
+    <div class="width-limited">
         <ConfigEditor {state} />
     </div>
 </div>
diff --git a/ts/deckconfig/OptionsDropdown.svelte b/ts/deckconfig/OptionsDropdown.svelte
index 155e18142..4193334fb 100644
--- a/ts/deckconfig/OptionsDropdown.svelte
+++ b/ts/deckconfig/OptionsDropdown.svelte
@@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => save(false)}>Save</button>
     <button
         type="button"
-        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+        class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
         data-bs-toggle="dropdown"
         aria-expanded="false">
         <span class="visually-hidden">Toggle Dropdown</span>