Merge pull request #1260 from ankitects/option-columns

use css columns instead of grid

ts/deckoptions/DeckOptionsPage.svelte

@@ -57,7 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ConfigSelector {state} />
 
-<Container api={options} class="g-1">
+<Container api={options} class="g-1 mb-3 mt-3">
+    <div class="multi-column">
         <Item>
             <DailyLimits {state} api={dailyLimits} />
         </Item>
@@ -65,9 +66,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <Item>
             <NewOptions {state} api={newOptions} />
         </Item>
+
         <Item>
             <LapseOptions {state} api={lapseOptions} />
         </Item>
+
         <Item>
             <BuryOptions {state} api={buryOptions} />
         </Item>
@@ -81,13 +84,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <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>

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>