diff --git a/ts/deckoptions/AdvancedOptions.svelte b/ts/deckoptions/AdvancedOptions.svelte
index 433acbf0f..0f33290bf 100644
--- a/ts/deckoptions/AdvancedOptions.svelte
+++ b/ts/deckoptions/AdvancedOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
@@ -19,12 +20,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingMaximumInterval()}
             <HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox
                 min={1}
                 max={365 * 100}
@@ -34,76 +35,76 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.maximumReviewInterval}
                 bind:value={$config.maximumReviewInterval}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingStartingEase()}
             <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} />
             <RevertButton
                 defaultValue={defaults.initialEase}
                 bind:value={$config.initialEase}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingEasyBonus()}
             <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} />
             <RevertButton
                 defaultValue={defaults.easyMultiplier}
                 bind:value={$config.easyMultiplier}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingIntervalModifier()}
             <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} />
             <RevertButton
                 defaultValue={defaults.intervalMultiplier}
                 bind:value={$config.intervalMultiplier}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingHardInterval()}
             <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} />
             <RevertButton
                 defaultValue={defaults.hardMultiplier}
                 bind:value={$config.hardMultiplier}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingNewInterval()}
             <HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} />
             <RevertButton
                 defaultValue={defaults.lapseMultiplier}
                 bind:value={$config.lapseMultiplier}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>
diff --git a/ts/deckoptions/AudioOptions.svelte b/ts/deckoptions/AudioOptions.svelte
index 2cfa187df..152600033 100644
--- a/ts/deckoptions/AudioOptions.svelte
+++ b/ts/deckoptions/AudioOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
@@ -18,34 +19,34 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>
-    <ConfigEntry>
-        <svelte:fragment slot="left">
+    <Row>
+        <Col>
             <CheckBox bind:value={$config.disableAutoplay}>
                 {tr.deckConfigDisableAutoplay()}
             </CheckBox>
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col grow={false}>
             <RevertButton
                 defaultValue={defaults.disableAutoplay}
                 bind:value={$config.disableAutoplay}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <svelte:fragment slot="left">
+    <Row>
+        <Col>
             <CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}>
                 {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
                 <HelpPopup
                     html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
                 />
             </CheckBox>
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col grow={false}>
             <RevertButton
                 defaultValue={defaults.skipQuestionWhenReplayingAnswer}
                 bind:value={$config.skipQuestionWhenReplayingAnswer}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>
diff --git a/ts/deckoptions/BuryOptions.svelte b/ts/deckoptions/BuryOptions.svelte
index 561ae55e4..4ce27dbaf 100644
--- a/ts/deckoptions/BuryOptions.svelte
+++ b/ts/deckoptions/BuryOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Col from "./Col.svelte";
+    import Row from "./Row.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
@@ -18,33 +19,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigBuryTitle()}>
-    <ConfigEntry>
-        <svelte:fragment slot="left">
+    <Row>
+        <Col>
             <CheckBox bind:value={$config.buryNew}>
                 {tr.deckConfigBuryNewSiblings()}
                 <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
             </CheckBox>
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col grow={false}>
             <RevertButton
                 defaultValue={defaults.buryNew}
                 bind:value={$config.buryNew}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <svelte:fragment slot="left">
+    <Row>
+        <Col>
             <CheckBox bind:value={$config.buryReviews}>
                 {tr.deckConfigBuryReviewSiblings()}
                 <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
             </CheckBox>
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col grow={false}>
             <RevertButton
                 defaultValue={defaults.buryReviews}
                 bind:value={$config.buryReviews}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>
diff --git a/ts/deckoptions/Col.svelte b/ts/deckoptions/Col.svelte
new file mode 100644
index 000000000..3daa87d87
--- /dev/null
+++ b/ts/deckoptions/Col.svelte
@@ -0,0 +1,23 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+    export let breakpoint: Breakpoint | undefined = undefined;
+    export let size: Size | undefined = undefined;
+    export let grow = true;
+
+    let colClass: string;
+    $: {
+        const breakpointComponent = breakpoint ? `-${breakpoint}` : "";
+        const sizeComponent = size ? `-${size}` : "";
+        colClass = "col" + breakpointComponent + sizeComponent;
+    }
+</script>
+
+<div class={`${colClass} d-flex align-items-center`} class:flex-grow-0={!grow}>
+    <slot />
+</div>
diff --git a/ts/deckoptions/ConfigEntry.svelte b/ts/deckoptions/ConfigEntry.svelte
deleted file mode 100644
index a5e7273b5..000000000
--- a/ts/deckoptions/ConfigEntry.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import Row from "./Row.svelte";
-
-    export let id: string | undefined = undefined;
-    export let wrap = false;
-</script>
-
-<Row {id}>
-    {#if $$slots.center}
-        <div class="col-7 d-flex align-items-center">
-            <slot name="left" />
-        </div>
-
-        <div class="col-4 d-flex align-items-center">
-            <slot name="center" />
-        </div>
-    {:else}
-        <div class="col-11 d-flex align-items-center">
-            <slot name="left" />
-        </div>
-    {/if}
-
-    <div class="col-1 d-flex align-items-center">
-        <slot name="right" />
-    </div>
-</Row>
diff --git a/ts/deckoptions/DailyLimits.svelte b/ts/deckoptions/DailyLimits.svelte
index 980b0dd1b..d45324f81 100644
--- a/ts/deckoptions/DailyLimits.svelte
+++ b/ts/deckoptions/DailyLimits.svelte
@@ -6,7 +6,8 @@
     import marked from "marked";
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import Warnings from "./Warnings.svelte";
     import SpinBox from "./SpinBox.svelte";
@@ -40,37 +41,37 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingNewCardsday()}<HelpPopup
                 html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox min={0} bind:value={$config.newPerDay} />
             <RevertButton
                 defaultValue={defaults.newPerDay}
                 bind:value={$config.newPerDay}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
     <Warnings warnings={[newCardsGreaterThanParent]} />
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingMaximumReviewsday()}<HelpPopup
                 html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox min={0} bind:value={$config.reviewsPerDay} />
             <RevertButton
                 defaultValue={defaults.reviewsPerDay}
                 bind:value={$config.reviewsPerDay}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
     <Warnings warnings={[reviewsTooLow]} />
 </TitledContainer>
diff --git a/ts/deckoptions/DisplayOrder.svelte b/ts/deckoptions/DisplayOrder.svelte
index 16aad8ad5..f59a2f95f 100644
--- a/ts/deckoptions/DisplayOrder.svelte
+++ b/ts/deckoptions/DisplayOrder.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
@@ -41,12 +42,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigNewGatherPriority()}
             <HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <EnumSelector
                 choices={newGatherPriorityChoices}
                 bind:value={$config.newCardGatherPriority}
@@ -55,15 +56,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.newCardGatherPriority}
                 bind:value={$config.newCardGatherPriority}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigNewCardSortOrder()}
             <HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <EnumSelector
                 choices={newSortOrderChoices}
                 bind:value={$config.newCardSortOrder}
@@ -72,26 +73,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.newCardSortOrder}
                 bind:value={$config.newCardSortOrder}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigNewReviewPriority()}
             <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} />
             <RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigInterdayStepPriority()}
             <HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <EnumSelector
                 choices={reviewMixChoices()}
                 bind:value={$config.interdayLearningMix}
@@ -100,15 +101,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.interdayLearningMix}
                 bind:value={$config.interdayLearningMix}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigReviewSortOrder()}
             <HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <EnumSelector
                 choices={reviewOrderChoices}
                 bind:value={$config.reviewOrder}
@@ -117,6 +118,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.reviewOrder}
                 bind:value={$config.reviewOrder}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>>
diff --git a/ts/deckoptions/LapseOptions.svelte b/ts/deckoptions/LapseOptions.svelte
index 100818d1d..7631fb315 100644
--- a/ts/deckoptions/LapseOptions.svelte
+++ b/ts/deckoptions/LapseOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import Warnings from "./Warnings.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
@@ -34,74 +35,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingLapses()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigRelearningSteps()}<HelpPopup
                 html={marked(tr.deckConfigRelearningStepsTooltip())}
             />
-        </span>
-        <svelte:fragment slot="center">
-            <StepsInput
-                value={$config.relearnSteps}
-                on:changed={(evt) => ($config.relearnSteps = evt.detail.value)}
-            />
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col breakpoint={$config.relearnSteps.length > 2 ? "sm" : undefined} size={5}>
+            <StepsInput bind:value={$config.relearnSteps} />
             <RevertButton
                 defaultValue={defaults.relearnSteps}
                 value={$config.relearnSteps}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingMinimumInterval()}<HelpPopup
                 html={marked(tr.deckConfigMinimumIntervalTooltip())}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox min={1} bind:value={$config.minimumLapseInterval} />
             <RevertButton
                 defaultValue={defaults.minimumLapseInterval}
                 bind:value={$config.minimumLapseInterval}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
     <Warnings warnings={[stepsExceedMinimumInterval]} />
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingLeechThreshold()}<HelpPopup
                 html={marked(tr.deckConfigLeechThresholdTooltip())}
             />
-        </span>
-        <svelte:fragment slot="center">
+        </Col>
+        <Col size={5}>
             <SpinBox min={1} bind:value={$config.leechThreshold} />
-        </svelte:fragment>
-        <svelte:fragment slot="right">
             <RevertButton
                 defaultValue={defaults.leechThreshold}
                 bind:value={$config.leechThreshold}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingLeechAction()}<HelpPopup
                 html={marked(tr.deckConfigLeechActionTooltip())}
             />
-        </span>
-        <svelte:fragment slot="center">
+        </Col>
+        <Col size={5}>
             <EnumSelector choices={leechChoices} bind:value={$config.leechAction} />
-        </svelte:fragment>
-        <svelte:fragment slot="right">
             <RevertButton
                 defaultValue={defaults.leechAction}
                 bind:value={$config.leechAction}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>
diff --git a/ts/deckoptions/NewOptions.svelte b/ts/deckoptions/NewOptions.svelte
index bf357b6c1..736762d40 100644
--- a/ts/deckoptions/NewOptions.svelte
+++ b/ts/deckoptions/NewOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import Warnings from "./Warnings.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
@@ -42,62 +43,62 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigLearningSteps()}<HelpPopup
                 html={marked(tr.deckConfigLearningStepsTooltip())}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <StepsInput bind:value={$config.learnSteps} />
             <RevertButton
                 defaultValue={defaults.learnSteps}
                 bind:value={$config.learnSteps}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingGraduatingInterval()}<HelpPopup
                 html={marked(tr.deckConfigGraduatingIntervalTooltip())}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox bind:value={$config.graduatingIntervalGood} />
             <RevertButton
                 defaultValue={defaults.graduatingIntervalGood}
                 bind:value={$config.graduatingIntervalGood}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
     <Warnings warnings={[stepsExceedGraduatingInterval]} />
 
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.schedulingEasyInterval()}<HelpPopup
                 html={marked(tr.deckConfigEasyIntervalTooltip())}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox bind:value={$config.graduatingIntervalEasy} />
             <RevertButton
                 defaultValue={defaults.graduatingIntervalEasy}
                 bind:value={$config.graduatingIntervalEasy}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
     <Warnings warnings={[goodExceedsEasy]} />
 
-    <ConfigEntry wrap={true}>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigNewInsertionOrder()}<HelpPopup
                 html={marked(tr.deckConfigNewInsertionOrderTooltip())}
             />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col breakpoint={"md"} size={5}>
             <EnumSelector
                 choices={newInsertOrderChoices}
                 bind:value={$config.newCardInsertOrder}
@@ -106,6 +107,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 defaultValue={defaults.newCardInsertOrder}
                 bind:value={$config.newCardInsertOrder}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>
diff --git a/ts/deckoptions/TimerOptions.svelte b/ts/deckoptions/TimerOptions.svelte
index b528bf051..51a9825a5 100644
--- a/ts/deckoptions/TimerOptions.svelte
+++ b/ts/deckoptions/TimerOptions.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import CheckBox from "./CheckBox.svelte";
@@ -19,32 +20,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()}>
-    <ConfigEntry>
-        <span slot="left">
+    <Row>
+        <Col size={7}>
             {tr.deckConfigMaximumAnswerSecs()}
             <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
-        </span>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col size={5}>
             <SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} />
             <RevertButton
                 defaultValue={defaults.capAnswerTimeToSecs}
                 bind:value={$config.capAnswerTimeToSecs}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 
-    <ConfigEntry>
-        <svelte:fragment slot="left">
+    <Row>
+        <Col>
             <CheckBox bind:value={$config.showTimer}>
                 {tr.schedulingShowAnswerTimer()}
                 <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
             </CheckBox>
-        </svelte:fragment>
-        <svelte:fragment slot="right">
+        </Col>
+        <Col grow={false}>
             <RevertButton
                 defaultValue={defaults.showTimer}
                 bind:value={$config.showTimer}
             />
-        </svelte:fragment>
-    </ConfigEntry>
+        </Col>
+    </Row>
 </TitledContainer>