Position Revert/Gear button on the left of the label

+ Make the reverse arrow spin

ts/deckoptions/CheckBoxRow.svelte

@@ -17,12 +17,10 @@
 
 <Row>
     <Col>
+        <RevertButton bind:value {defaultValue} />
         <CheckBox bind:value
             >{#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
                 >{:else}<Label><slot /></Label>{/if}</CheckBox
         >
     </Col>
-    <Col grow={false}>
-        <RevertButton bind:value {defaultValue} />
-    </Col>
 </Row>

ts/deckoptions/EnumSelectorRow.svelte

@@ -20,10 +20,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col {breakpoint} size={5}>
         <EnumSelector bind:value {choices} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/RevertButton.svelte

@@ -44,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let:menuId
 >
     <Badge
-        class={className}
+        class={`p-1 ${className}`}
         on:mount={(event) => createDropdown(event.detail.span)}
         on:click={activateDropdown}
     >
@@ -53,6 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <DropdownMenu id={menuId}>
         <DropdownItem
+            class="spinner"
             on:click={() => {
                 revert();
                 // Otherwise the menu won't close when the item is clicked
@@ -64,3 +65,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </DropdownItem>
     </DropdownMenu>
 </WithDropdownMenu>
+
+<style lang="scss">
+    :global(.spinner:hover .badge) {
+        animation: spin-animation 1s infinite;
+        animation-timing-function: linear;
+    }
+
+    @keyframes -global-spin-animation {
+        0% {
+            transform: rotate(360deg);
+        }
+        100% {
+            transform: rotate(0deg);
+        }
+    }
+</style>

ts/deckoptions/SpinBoxFloatRow.svelte

@@ -18,10 +18,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <SpinBoxFloat bind:value {min} {max} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/SpinBoxRow.svelte

@@ -18,10 +18,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <SpinBox bind:value {min} {max} />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/StepsInputRow.svelte

@@ -16,10 +16,10 @@
 
 <Row>
     <Col size={7}>
+        <RevertButton bind:value {defaultValue} />
         <TooltipLabel {markdownTooltip}><slot /></TooltipLabel>
     </Col>
     <Col size={5}>
         <StepsInput bind:value />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/SwitchRow.svelte

@@ -19,12 +19,12 @@
 
 <Row>
     <Col>
+        <RevertButton bind:value {defaultValue} />
         {#if markdownTooltip}<TooltipLabel for={id} {markdownTooltip}
                 ><slot /></TooltipLabel
             >{:else}<Label for={id}><slot /></Label>{/if}
     </Col>
     <Col grow={false}>
         <Switch {id} bind:value />
-        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>