allow checkboxes and select entries to take up whole line

ts/deckconfig/CheckBox.svelte

@@ -4,16 +4,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import ConfigEntry from "./ConfigEntry.svelte";
-
-    export let label: string;
     export let subLabel: string;
     export let value: boolean;
     export let defaultValue: boolean;
 </script>
 
-<style>
-</style>
-
-<ConfigEntry {label} bind:value {defaultValue}>
-    <label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
+<ConfigEntry label="" wholeLine={true} bind:value {defaultValue}>
+    <div>
+        <label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
+    </div>
 </ConfigEntry>

ts/deckconfig/ConfigEntry.svelte

@@ -12,19 +12,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let defaultValue: any;
     /// empty strings will be ignored
     export let warnings: string[] = [];
+    export let wholeLine = false;
 </script>
 
 <style lang="scss">
     .outer {
         margin-top: 1em;
-
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 2fr 1fr;
         grid-column-gap: 0.5em;
     }
 
     .full-grid-width {
-        grid-row-start: 2;
         grid-column: 1 / 3;
     }
 
@@ -43,24 +42,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .input-grid {
-        // width: 90vw;
         display: grid;
         grid-column-gap: 0.5em;
-        grid-template-columns: 10fr 1fr;
+        grid-template-columns: 10fr 16px;
     }
 </style>
 
 <div class="outer">
-    <div class="table">
-        <span class="vcenter">
-            {label}
-            {#if subLabel}
-                <HelpPopup html={subLabel} />
-            {/if}
-        </span>
-    </div>
+    {#if label}
+        <div class="table">
+            <span class="vcenter">
+                {label}
+                {#if subLabel}
+                    <HelpPopup html={subLabel} />
+                {/if}
+            </span>
+        </div>
+    {/if}
 
-    <div class="input-grid">
+    <div class="input-grid" class:full-grid-width={wholeLine}>
         <slot />
         <RevertIcon bind:value {defaultValue} on:revert />
     </div>

ts/deckconfig/EnumSelector.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let defaultValue: number;
 </script>
 
-<ConfigEntry {label} {subLabel} bind:value {defaultValue}>
+<ConfigEntry {label} {subLabel} wholeLine={true} bind:value {defaultValue}>
     <select bind:value class="form-select">
         {#each choices as choice, idx}
             <option value={idx}>{choice}</option>

ts/deckconfig/GeneralOptions.svelte

@@ -25,19 +25,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bind:value={$config.capAnswerTimeToSecs} />
 
     <CheckBox
-        label="Answer timer"
         subLabel={tr.schedulingShowAnswerTimer()}
         defaultValue={defaults.showTimer}
         bind:value={$config.showTimer} />
 
     <CheckBox
-        label="Autoplay"
         subLabel="Don't play audio automatically"
         defaultValue={defaults.disableAutoplay}
         bind:value={$config.disableAutoplay} />
 
     <CheckBox
-        label="Question Audio"
         subLabel={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
         defaultValue={defaults.skipQuestionWhenReplayingAnswer}
         bind:value={$config.skipQuestionWhenReplayingAnswer} />

ts/deckconfig/HelpPopup.svelte

@@ -12,7 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let ref: HTMLAnchorElement;
 
     onMount(() => {
-        new Tooltip(ref, { placement: "bottom", html: true, offset: [0, 20] });
+        new Tooltip(ref, {
+            placement: "bottom",
+            html: true,
+            offset: [0, 20],
+        });
     });
 </script>
 

ts/deckconfig/NewOptions.svelte

@@ -78,7 +78,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:changed={(evt) => ($config.initialEase = evt.detail.value)} />
 
     <CheckBox
-        label="Bury New"
         subLabel={tr.schedulingBuryRelatedNewCardsUntilThe()}
         defaultValue={defaults.buryNew}
         bind:value={$config.buryNew} />

ts/deckconfig/ReviewOptions.svelte

@@ -53,7 +53,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)} />
 
     <CheckBox
-        label="Bury Reviews"
         subLabel={tr.schedulingBuryRelatedReviewsUntilTheNext()}
         defaultValue={defaults.buryReviews}
         bind:value={$config.buryReviews} />

ts/deckconfig/deckconfig-base.scss

@@ -31,3 +31,8 @@ html {
 #main {
     padding: 0.5em;
 }
+
+.tooltip-inner {
+    max-width: 300px;
+    text-align: left;
+}