Rename SectionItem to just Item and use across option sections

ts/components/ButtonToolbar.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
-    import SectionItem from "./SectionItem.svelte";
+    import Item from "./Item.svelte";
     import { sectionKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
@@ -84,9 +84,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <slot />
     {#each $dynamicItems as item}
-        <SectionItem id={item[0].id} registration={item[1]}>
+        <Item id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
-        </SectionItem>
+        </Item>
     {/each}
 </div>
 

ts/components/Section.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
-    import SectionItem from "./SectionItem.svelte";
+    import Item from "./Item.svelte";
     import { sectionKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
     import { insertElement, appendElement } from "./identifier";
@@ -56,9 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div bind:this={sectionRef} {id}>
     <slot />
     {#each $dynamicItems as item}
-        <SectionItem id={item[0].id} registration={item[1]}>
+        <Item id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
-        </SectionItem>
+        </Item>
     {/each}
 </div>
 

ts/deckoptions/AdvancedOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -17,62 +18,74 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()} {api}>
-    <SpinBoxRow
-        bind:value={$config.maximumReviewInterval}
-        defaultValue={defaults.maximumReviewInterval}
-        min={1}
-        max={365 * 100}
-        markdownTooltip={tr.deckConfigMaximumIntervalTooltip()}
-    >
-        {tr.schedulingMaximumInterval()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.maximumReviewInterval}
+            defaultValue={defaults.maximumReviewInterval}
+            min={1}
+            max={365 * 100}
+            markdownTooltip={tr.deckConfigMaximumIntervalTooltip()}
+        >
+            {tr.schedulingMaximumInterval()}
+        </SpinBoxRow>
+    </Item>
 
-    <SpinBoxFloatRow
-        bind:value={$config.initialEase}
-        defaultValue={defaults.initialEase}
-        min={1.31}
-        max={5}
-        markdownTooltip={tr.deckConfigStartingEaseTooltip()}
-    >
-        {tr.schedulingStartingEase()}
-    </SpinBoxFloatRow>
+    <Item>
+        <SpinBoxFloatRow
+            bind:value={$config.initialEase}
+            defaultValue={defaults.initialEase}
+            min={1.31}
+            max={5}
+            markdownTooltip={tr.deckConfigStartingEaseTooltip()}
+        >
+            {tr.schedulingStartingEase()}
+        </SpinBoxFloatRow>
+    </Item>
 
-    <SpinBoxFloatRow
-        bind:value={$config.easyMultiplier}
-        defaultValue={defaults.easyMultiplier}
-        min={1}
-        max={3}
-        markdownTooltip={tr.deckConfigEasyBonusTooltip()}
-    >
-        {tr.schedulingEasyBonus()}
-    </SpinBoxFloatRow>
+    <Item>
+        <SpinBoxFloatRow
+            bind:value={$config.easyMultiplier}
+            defaultValue={defaults.easyMultiplier}
+            min={1}
+            max={3}
+            markdownTooltip={tr.deckConfigEasyBonusTooltip()}
+        >
+            {tr.schedulingEasyBonus()}
+        </SpinBoxFloatRow>
+    </Item>
 
-    <SpinBoxFloatRow
-        bind:value={$config.intervalMultiplier}
-        defaultValue={defaults.intervalMultiplier}
-        min={0.5}
-        max={2}
-        markdownTooltip={tr.deckConfigIntervalModifierTooltip()}
-    >
-        {tr.schedulingIntervalModifier()}
-    </SpinBoxFloatRow>
+    <Item>
+        <SpinBoxFloatRow
+            bind:value={$config.intervalMultiplier}
+            defaultValue={defaults.intervalMultiplier}
+            min={0.5}
+            max={2}
+            markdownTooltip={tr.deckConfigIntervalModifierTooltip()}
+        >
+            {tr.schedulingIntervalModifier()}
+        </SpinBoxFloatRow>
+    </Item>
 
-    <SpinBoxFloatRow
-        bind:value={$config.hardMultiplier}
-        defaultValue={defaults.hardMultiplier}
-        min={0.5}
-        max={1.3}
-        markdownTooltip={tr.deckConfigHardIntervalTooltip()}
-    >
-        {tr.schedulingHardInterval()}
-    </SpinBoxFloatRow>
+    <Item>
+        <SpinBoxFloatRow
+            bind:value={$config.hardMultiplier}
+            defaultValue={defaults.hardMultiplier}
+            min={0.5}
+            max={1.3}
+            markdownTooltip={tr.deckConfigHardIntervalTooltip()}
+        >
+            {tr.schedulingHardInterval()}
+        </SpinBoxFloatRow>
+    </Item>
 
-    <SpinBoxFloatRow
-        bind:value={$config.lapseMultiplier}
-        defaultValue={defaults.lapseMultiplier}
-        max={1}
-        markdownTooltip={tr.deckConfigNewIntervalTooltip()}
-    >
-        {tr.schedulingNewInterval()}
-    </SpinBoxFloatRow>
+    <Item>
+        <SpinBoxFloatRow
+            bind:value={$config.lapseMultiplier}
+            defaultValue={defaults.lapseMultiplier}
+            max={1}
+            markdownTooltip={tr.deckConfigNewIntervalTooltip()}
+        >
+            {tr.schedulingNewInterval()}
+        </SpinBoxFloatRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/AudioOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -16,18 +17,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()} {api}>
-    <CheckBoxRow
-        bind:value={$config.disableAutoplay}
-        defaultValue={defaults.disableAutoplay}
-    >
-        {tr.deckConfigDisableAutoplay()}
-    </CheckBoxRow>
+    <Item>
+        <CheckBoxRow
+            bind:value={$config.disableAutoplay}
+            defaultValue={defaults.disableAutoplay}
+        >
+            {tr.deckConfigDisableAutoplay()}
+        </CheckBoxRow>
+    </Item>
 
-    <CheckBoxRow
-        bind:value={$config.skipQuestionWhenReplayingAnswer}
-        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-        markdownTooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
-    >
-        {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-    </CheckBoxRow>
+    <Item>
+        <CheckBoxRow
+            bind:value={$config.skipQuestionWhenReplayingAnswer}
+            defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+            markdownTooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
+        >
+            {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+        </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -16,19 +17,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigBuryTitle()} {api}>
-    <CheckBoxRow
-        bind:value={$config.buryNew}
-        defaultValue={defaults.buryNew}
-        markdownTooltip={tr.deckConfigBuryTitle()}
-    >
-        {tr.deckConfigBuryNewSiblings()}
-    </CheckBoxRow>
+    <Item>
+        <CheckBoxRow
+            bind:value={$config.buryNew}
+            defaultValue={defaults.buryNew}
+            markdownTooltip={tr.deckConfigBuryTitle()}
+        >
+            {tr.deckConfigBuryNewSiblings()}
+        </CheckBoxRow>
+    </Item>
 
-    <CheckBoxRow
-        bind:value={$config.buryReviews}
-        defaultValue={defaults.buryReviews}
-        markdownTooltip={tr.deckConfigBuryTooltip()}
-    >
-        {tr.deckConfigBuryReviewSiblings()}
-    </CheckBoxRow>
+    <Item>
+        <CheckBoxRow
+            bind:value={$config.buryReviews}
+            defaultValue={defaults.buryReviews}
+            markdownTooltip={tr.deckConfigBuryTooltip()}
+        >
+            {tr.deckConfigBuryReviewSiblings()}
+        </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/ConfigSelector.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
 
@@ -89,30 +89,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBar>
     <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
-        <SectionItem>
+        <Item>
             <ButtonGroup class="flex-grow-1">
                 <ButtonGroupItem>
                     <SelectButton class="flex-grow-1" on:change={blur}>
-                        {#each $configList as entry}
-                            <SelectOption
-                                value={String(entry.idx)}
-                                selected={entry.current}
-                            >
-                                {configLabel(entry)}
-                            </SelectOption>
-                        {/each}
+                         {#each $configList as entry}
+                             <SelectOption
+                                 value={String(entry.idx)}
+                                 selected={entry.current}
+                             >
+                                 {configLabel(entry)}
+                             </SelectOption>
+                         {/each}
                     </SelectButton>
                 </ButtonGroupItem>
             </ButtonGroup>
-        </SectionItem>
+        </Item>
 
-        <SectionItem>
+        <Item>
             <SaveButton
                 {state}
                 on:add={promptToAdd}
                 on:clone={promptToClone}
                 on:rename={promptToRename}
             />
-        </SectionItem>
+        </Item>
     </ButtonToolbar>
 </StickyBar>

ts/deckoptions/DailyLimits.svelte

@@ -5,7 +5,7 @@
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -39,7 +39,7 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()} {api}>
-    <SectionItem>
+    <Item>
         <SpinBoxRow
             bind:value={$config.newPerDay}
             defaultValue={defaults.newPerDay}
@@ -49,9 +49,9 @@
         </SpinBoxRow>
 
         <Warning warning={newCardsGreaterThanParent} />
-    </SectionItem>
+    </Item>
 
-    <SectionItem>
+    <Item>
         <SpinBoxRow
             bind:value={$config.reviewsPerDay}
             defaultValue={defaults.reviewsPerDay}
@@ -61,5 +61,5 @@
         </SpinBoxRow>
 
         <Warning warning={reviewsTooLow} />
-    </SectionItem>
+    </Item>
 </TitledContainer>

ts/deckoptions/DeckOptionsPage.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import ConfigSelector from "./ConfigSelector.svelte";
     import Container from "components/Container.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import DailyLimits from "./DailyLimits.svelte";
     import DisplayOrder from "./DisplayOrder.svelte";
     import NewOptions from "./NewOptions.svelte";
@@ -58,36 +58,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ConfigSelector {state} />
 
 <Container api={options}>
-    <SectionItem>
+    <Item>
         <DailyLimits {state} api={dailyLimits} />
-    </SectionItem>
+    </Item>
 
-    <SectionItem>
+    <Item>
         <NewOptions {state} api={newOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <LapseOptions {state} api={lapseOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <BuryOptions {state} api={buryOptions} />
-    </SectionItem>
+    </Item>
 
     {#if state.v3Scheduler}
-        <SectionItem>
+        <Item>
             <DisplayOrder {state} api={displayOrder} />
-        </SectionItem>
+        </Item>
     {/if}
 
-    <SectionItem>
+    <Item>
         <TimerOptions {state} api={timerOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <AudioOptions {state} api={audioOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <Addons {state} api={addonOptions} />
-    </SectionItem>
-    <SectionItem>
+    </Item>
+    <Item>
         <AdvancedOptions {state} api={advancedOptions} />
-    </SectionItem>
+    </Item>
 </Container>

ts/deckoptions/DisplayOrder.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
 
     import type { DeckOptionsState } from "./lib";
@@ -39,48 +40,58 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()} {api}>
-    <EnumSelectorRow
-        bind:value={$config.newCardGatherPriority}
-        defaultValue={defaults.newCardGatherPriority}
-        choices={newGatherPriorityChoices}
-        markdownTooltip={tr.deckConfigNewGatherPriorityTooltip()}
-    >
-        {tr.deckConfigNewGatherPriority()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.newCardGatherPriority}
+            defaultValue={defaults.newCardGatherPriority}
+            choices={newGatherPriorityChoices}
+            markdownTooltip={tr.deckConfigNewGatherPriorityTooltip()}
+        >
+            {tr.deckConfigNewGatherPriority()}
+        </EnumSelectorRow>
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.newCardSortOrder}
-        defaultValue={defaults.newCardSortOrder}
-        choices={newSortOrderChoices}
-        markdownTooltip={tr.deckConfigNewCardSortOrderTooltip()}
-    >
-        {tr.deckConfigNewCardSortOrder()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.newCardSortOrder}
+            defaultValue={defaults.newCardSortOrder}
+            choices={newSortOrderChoices}
+            markdownTooltip={tr.deckConfigNewCardSortOrderTooltip()}
+        >
+            {tr.deckConfigNewCardSortOrder()}
+        </EnumSelectorRow>
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.newMix}
-        defaultValue={defaults.newMix}
-        choices={reviewMixChoices()}
-        markdownTooltip={tr.deckConfigNewReviewPriorityTooltip()}
-    >
-        {tr.deckConfigNewReviewPriority()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.newMix}
+            defaultValue={defaults.newMix}
+            choices={reviewMixChoices()}
+            markdownTooltip={tr.deckConfigNewReviewPriorityTooltip()}
+        >
+            {tr.deckConfigNewReviewPriority()}
+        </EnumSelectorRow>
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.interdayLearningMix}
-        defaultValue={defaults.interdayLearningMix}
-        choices={reviewMixChoices()}
-        markdownTooltip={tr.deckConfigInterdayStepPriorityTooltip()}
-    >
-        {tr.deckConfigInterdayStepPriority()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.interdayLearningMix}
+            defaultValue={defaults.interdayLearningMix}
+            choices={reviewMixChoices()}
+            markdownTooltip={tr.deckConfigInterdayStepPriorityTooltip()}
+        >
+            {tr.deckConfigInterdayStepPriority()}
+        </EnumSelectorRow>
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.reviewOrder}
-        defaultValue={defaults.reviewOrder}
-        choices={reviewOrderChoices}
-        markdownTooltip={tr.deckConfigReviewSortOrderTooltip()}
-    >
-        {tr.deckConfigReviewSortOrder()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.reviewOrder}
+            defaultValue={defaults.reviewOrder}
+            choices={reviewOrderChoices}
+            markdownTooltip={tr.deckConfigReviewSortOrderTooltip()}
+        >
+            {tr.deckConfigReviewSortOrder()}
+        </EnumSelectorRow>
+    </Item>
 </TitledContainer>>

ts/deckoptions/LapseOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -32,41 +33,49 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingLapses()} {api}>
-    <StepsInputRow
-        bind:value={$config.relearnSteps}
-        defaultValue={defaults.relearnSteps}
-        markdownTooltip={tr.deckConfigRelearningStepsTooltip()}
-    >
-        {tr.deckConfigRelearningSteps()}
-    </StepsInputRow>
+    <Item>
+        <StepsInputRow
+            bind:value={$config.relearnSteps}
+            defaultValue={defaults.relearnSteps}
+            markdownTooltip={tr.deckConfigRelearningStepsTooltip()}
+        >
+            {tr.deckConfigRelearningSteps()}
+        </StepsInputRow>
+    </Item>
 
-    <SpinBoxRow
-        bind:value={$config.minimumLapseInterval}
-        defaultValue={defaults.minimumLapseInterval}
-        min={1}
-        markdownTooltip={tr.deckConfigMinimumIntervalTooltip()}
-    >
-        {tr.schedulingMinimumInterval()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.minimumLapseInterval}
+            defaultValue={defaults.minimumLapseInterval}
+            min={1}
+            markdownTooltip={tr.deckConfigMinimumIntervalTooltip()}
+        >
+            {tr.schedulingMinimumInterval()}
+        </SpinBoxRow>
 
-    <Warning warning={stepsExceedMinimumInterval} />
+        <Warning warning={stepsExceedMinimumInterval} />
+    </Item>
 
-    <SpinBoxRow
-        bind:value={$config.leechThreshold}
-        defaultValue={defaults.leechThreshold}
-        min={1}
-        markdownTooltip={tr.deckConfigLeechThresholdTooltip()}
-    >
-        {tr.schedulingLeechThreshold()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.leechThreshold}
+            defaultValue={defaults.leechThreshold}
+            min={1}
+            markdownTooltip={tr.deckConfigLeechThresholdTooltip()}
+        >
+            {tr.schedulingLeechThreshold()}
+        </SpinBoxRow>
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.leechAction}
-        defaultValue={defaults.leechAction}
-        choices={leechChoices}
-        breakpoint="sm"
-        markdownTooltip={tr.deckConfigLeechActionTooltip()}
-    >
-        {tr.schedulingLeechAction()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.leechAction}
+            defaultValue={defaults.leechAction}
+            choices={leechChoices}
+            breakpoint="sm"
+            markdownTooltip={tr.deckConfigLeechActionTooltip()}
+        >
+            {tr.schedulingLeechAction()}
+        </EnumSelectorRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/NewOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -40,41 +41,49 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()} {api}>
-    <StepsInputRow
-        bind:value={$config.learnSteps}
-        defaultValue={defaults.learnSteps}
-        markdownTooltip={tr.deckConfigLearningStepsTooltip()}
-    >
-        {tr.deckConfigLearningSteps()}
-    </StepsInputRow>
+    <Item>
+        <StepsInputRow
+            bind:value={$config.learnSteps}
+            defaultValue={defaults.learnSteps}
+            markdownTooltip={tr.deckConfigLearningStepsTooltip()}
+        >
+            {tr.deckConfigLearningSteps()}
+        </StepsInputRow>
+    </Item>
 
-    <SpinBoxRow
-        bind:value={$config.graduatingIntervalGood}
-        defaultValue={defaults.graduatingIntervalGood}
-        markdownTooltip={tr.deckConfigGraduatingIntervalTooltip()}
-    >
-        {tr.schedulingGraduatingInterval()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.graduatingIntervalGood}
+            defaultValue={defaults.graduatingIntervalGood}
+            markdownTooltip={tr.deckConfigGraduatingIntervalTooltip()}
+        >
+            {tr.schedulingGraduatingInterval()}
+        </SpinBoxRow>
 
-    <Warning warning={stepsExceedGraduatingInterval} />
+        <Warning warning={stepsExceedGraduatingInterval} />
+    </Item>
 
-    <SpinBoxRow
-        bind:value={$config.graduatingIntervalEasy}
-        defaultValue={defaults.graduatingIntervalEasy}
-        markdownTooltip={tr.deckConfigEasyIntervalTooltip()}
-    >
-        {tr.schedulingEasyInterval()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.graduatingIntervalEasy}
+            defaultValue={defaults.graduatingIntervalEasy}
+            markdownTooltip={tr.deckConfigEasyIntervalTooltip()}
+        >
+            {tr.schedulingEasyInterval()}
+        </SpinBoxRow>
 
-    <Warning warning={goodExceedsEasy} />
+        <Warning warning={goodExceedsEasy} />
+    </Item>
 
-    <EnumSelectorRow
-        bind:value={$config.newCardInsertOrder}
-        defaultValue={defaults.newCardInsertOrder}
-        choices={newInsertOrderChoices}
-        breakpoint={"md"}
-        markdownTooltip={tr.deckConfigNewInsertionOrderTooltip()}
-    >
-        {tr.deckConfigNewInsertionOrder()}
-    </EnumSelectorRow>
+    <Item>
+        <EnumSelectorRow
+            bind:value={$config.newCardInsertOrder}
+            defaultValue={defaults.newCardInsertOrder}
+            choices={newInsertOrderChoices}
+            breakpoint={"md"}
+            markdownTooltip={tr.deckConfigNewInsertionOrderTooltip()}
+        >
+            {tr.deckConfigNewInsertionOrder()}
+        </EnumSelectorRow>
+    </Item>
 </TitledContainer>

ts/deckoptions/TimerOptions.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -17,21 +18,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()} {api}>
-    <SpinBoxRow
-        bind:value={$config.capAnswerTimeToSecs}
-        defaultValue={defaults.capAnswerTimeToSecs}
-        min={30}
-        max={600}
-        markdownTooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
-    >
-        {tr.deckConfigMaximumAnswerSecs()}
-    </SpinBoxRow>
+    <Item>
+        <SpinBoxRow
+            bind:value={$config.capAnswerTimeToSecs}
+            defaultValue={defaults.capAnswerTimeToSecs}
+            min={30}
+            max={600}
+            markdownTooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
+        >
+            {tr.deckConfigMaximumAnswerSecs()}
+        </SpinBoxRow>
+    </Item>
 
-    <CheckBoxRow
-        bind:value={$config.showTimer}
-        defaultValue={defaults.showTimer}
-        markdownTooltip={tr.deckConfigShowAnswerTimerTooltip()}
-    >
-        {tr.schedulingShowAnswerTimer()}
-    </CheckBoxRow>
+    <Item>
+        <CheckBoxRow
+            bind:value={$config.showTimer}
+            defaultValue={defaults.showTimer}
+            markdownTooltip={tr.deckConfigShowAnswerTimerTooltip()}
+        >
+            {tr.schedulingShowAnswerTimer()}
+        </CheckBoxRow>
+    </Item>
 </TitledContainer>

ts/editor/EditorToolbar.svelte

@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { isApplePlatform } from "lib/platform";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
@@ -54,24 +54,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBar>
     <ButtonToolbar {size} {wrap} api={toolbar}>
-        <SectionItem id="notetype">
+        <Item id="notetype">
             <NoteTypeButtons api={notetypeButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="inlineFormatting">
+        <Item id="inlineFormatting">
             <FormatInlineButtons api={formatInlineButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="blockFormatting">
+        <Item id="blockFormatting">
             <FormatBlockButtons api={formatBlockButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="color">
+        <Item id="color">
             <ColorButtons api={colorButtons} />
-        </SectionItem>
+        </Item>
 
-        <SectionItem id="template">
+        <Item id="template">
             <TemplateButtons api={templateButtons} />
-        </SectionItem>
+        </Item>
     </ButtonToolbar>
 </StickyBar>

ts/editor/FormatBlockButtons.svelte

@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
-    import SectionItem from "components/SectionItem.svelte";
+    import Item from "components/Item.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
     import CommandIconButton from "./CommandIconButton.svelte";
@@ -71,7 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </OnlyEditable>
 
             <ButtonDropdown id={menuId}>
-                <SectionItem id="justify">
+                <Item id="justify">
                     <ButtonGroup>
                         <ButtonGroupItem>
                             <CommandIconButton
@@ -109,9 +109,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             >
                         </ButtonGroupItem>
                     </ButtonGroup>
-                </SectionItem>
+                </Item>
 
-                <SectionItem id="indentation">
+                <Item id="indentation">
                     <ButtonGroup>
                         <ButtonGroupItem>
                             <OnlyEditable let:disabled>
@@ -137,7 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             </OnlyEditable>
                         </ButtonGroupItem>
                     </ButtonGroup>
-                </SectionItem>
+                </Item>
             </ButtonDropdown>
         </WithDropdownMenu>
     </ButtonGroupItem>