From 9d1a755fdceedc7420596a11f860c651ee9bda79 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Mon, 28 Jun 2021 18:06:33 +1000
Subject: [PATCH] use css columns instead of grid

Alternative approach to #1255

thanks to Hikaru and Henrik for the margin fix, and Matthias for
the initial idea and prototypes!
---
 ts/deckoptions/DeckOptionsPage.svelte | 80 +++++++++++++++++----------
 ts/deckoptions/TitledContainer.svelte |  6 +-
 2 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte
index 9838c2e84..90384cc44 100644
--- a/ts/deckoptions/DeckOptionsPage.svelte
+++ b/ts/deckoptions/DeckOptionsPage.svelte
@@ -57,37 +57,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ConfigSelector {state} />
 
-<Container api={options} class="g-1">
-    <Item>
-        <DailyLimits {state} api={dailyLimits} />
-    </Item>
-
-    <Item>
-        <NewOptions {state} api={newOptions} />
-    </Item>
-    <Item>
-        <LapseOptions {state} api={lapseOptions} />
-    </Item>
-    <Item>
-        <BuryOptions {state} api={buryOptions} />
-    </Item>
-
-    {#if state.v3Scheduler}
+<Container api={options} class="g-1 mb-3 mt-3">
+    <div class="multi-column">
         <Item>
-            <DisplayOrder {state} api={displayOrder} />
+            <DailyLimits {state} api={dailyLimits} />
         </Item>
-    {/if}
 
-    <Item>
-        <TimerOptions {state} api={timerOptions} />
-    </Item>
-    <Item>
-        <AudioOptions {state} api={audioOptions} />
-    </Item>
-    <Item>
-        <Addons {state} api={addonOptions} />
-    </Item>
-    <Item>
-        <AdvancedOptions {state} api={advancedOptions} />
-    </Item>
+        <Item>
+            <NewOptions {state} api={newOptions} />
+        </Item>
+
+        <Item>
+            <LapseOptions {state} api={lapseOptions} />
+        </Item>
+
+        <Item>
+            <BuryOptions {state} api={buryOptions} />
+        </Item>
+
+        {#if state.v3Scheduler}
+            <Item>
+                <DisplayOrder {state} api={displayOrder} />
+            </Item>
+        {/if}
+
+        <Item>
+            <TimerOptions {state} api={timerOptions} />
+        </Item>
+
+        <Item>
+            <AudioOptions {state} api={audioOptions} />
+        </Item>
+
+        <Item>
+            <Addons {state} api={addonOptions} />
+        </Item>
+
+        <Item>
+            <AdvancedOptions {state} api={advancedOptions} />
+        </Item>
+    </div>
 </Container>
+
+<style lang="scss">
+    .multi-column {
+        column-count: 2;
+        column-gap: 5em;
+    }
+
+    @media (max-width: 1000px) {
+        .multi-column {
+            column-count: 1;
+        }
+    }
+</style>
diff --git a/ts/deckoptions/TitledContainer.svelte b/ts/deckoptions/TitledContainer.svelte
index 03c669f36..bc3870c4f 100644
--- a/ts/deckoptions/TitledContainer.svelte
+++ b/ts/deckoptions/TitledContainer.svelte
@@ -9,7 +9,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 class="container-fluid my-4">
+<div class="container-fluid mb-5">
     <h1>{title}</h1>
 
     <Section {api}>
@@ -21,4 +21,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     h1 {
         border-bottom: 1px solid var(--medium-border);
     }
+
+    .container-fluid {
+        break-inside: avoid;
+    }
 </style>