Start using Bootstrap grid for deckoptions

ts/deckoptions/ConfigEntry.svelte

@@ -21,60 +21,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: renderedTooltip = marked(tooltip);
 </script>
 
-<div {id} class="outer">
-    {#if label}
-        <div class="table">
-            <span class="vcenter">
-                {label}
-                {#if renderedTooltip}
-                    <HelpPopup html={renderedTooltip} />
-                {/if}
-            </span>
-        </div>
-    {/if}
-
-    <div class="input-grid" class:full-grid-width={wholeLine}>
-        <slot />
-        <RevertButton bind:value {defaultValue} on:revert />
+<div {id} class="row gx-0">
+    <div class="col-8">
+        <span
+            >{label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}</span
+        >
     </div>
 
-    <div class="full-grid-width">
-        {#each warnings as warning}
-            {#if warning}
-                <div class="alert alert-warning" in:slide out:slide>{warning}</div>
-            {/if}
-        {/each}
+    <div class="col-3">
+        <slot />
+    </div>
+
+    <div class="col-1">
+        <RevertButton bind:value {defaultValue} on:revert />
     </div>
 </div>
 
-<style lang="scss">
-    .outer {
-        display: grid;
-        grid-template-columns: 7fr 3fr;
-        grid-row-gap: 0.5em;
-    }
-
-    .full-grid-width {
-        grid-column: 1 / 6;
-    }
-
-    .table {
-        display: table;
-        height: 100%;
-    }
-
-    .vcenter {
-        display: table-cell;
-        vertical-align: middle;
-    }
-
-    .alert {
-        margin-top: 0.5em;
-    }
-
-    .input-grid {
-        display: grid;
-        grid-column-gap: 0.5em;
-        grid-template-columns: 10fr 16px;
-    }
-</style>
+{#each warnings as warning}
+    {#if warning}
+        <div class="row alert alert-warning" in:slide out:slide>{warning}</div>
+    {/if}
+{/each}

ts/deckoptions/DailyLimits.svelte

@@ -33,22 +33,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             : "";
 </script>
 
-<h2>{tr.deckConfigDailyLimits()}</h2>
+<div class="container">
+    <p>{tr.deckConfigDailyLimits()}</p>
 
-<SpinBox
-    label={tr.schedulingNewCardsday()}
-    tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
-    min={0}
-    warnings={[newCardsGreaterThanParent]}
-    defaultValue={defaults.newPerDay}
-    bind:value={$config.newPerDay}
-/>
+    <SpinBox
+        label={tr.schedulingNewCardsday()}
+        tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
+        min={0}
+        warnings={[newCardsGreaterThanParent]}
+        defaultValue={defaults.newPerDay}
+        bind:value={$config.newPerDay}
+    />
 
-<SpinBox
-    label={tr.schedulingMaximumReviewsday()}
-    tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
-    min={0}
-    warnings={[reviewsTooLow]}
-    defaultValue={defaults.reviewsPerDay}
-    bind:value={$config.reviewsPerDay}
-/>
+    <SpinBox
+        label={tr.schedulingMaximumReviewsday()}
+        tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
+        min={0}
+        warnings={[reviewsTooLow]}
+        defaultValue={defaults.reviewsPerDay}
+        bind:value={$config.reviewsPerDay}
+    />
+</div>

ts/deckoptions/deckoptions-base.scss

@@ -4,6 +4,7 @@
 
 @import "ts/sass/base";
 @import "ts/sass/bootstrap/containers";
+@import "ts/sass/bootstrap/grid";
 @import "ts/sass/bootstrap/dropdown";
 @import "ts/sass/bootstrap/forms";
 @import "ts/sass/bootstrap/buttons";