From dacca4cdf1febc401a949ed0d7c06533f0c312a1 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 19 Jan 2024 09:57:15 -0500
Subject: [PATCH] fix(web): slider (#6485)

---
 .../admin-page/settings/setting-switch.svelte | 35 ++++++++++---------
 web/src/lib/components/elements/slider.svelte | 31 ++++++++--------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/admin-page/settings/setting-switch.svelte b/web/src/lib/components/admin-page/settings/setting-switch.svelte
index 512de18669..d26144913f 100644
--- a/web/src/lib/components/admin-page/settings/setting-switch.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-switch.svelte
@@ -13,20 +13,23 @@
   const dispatch = createEventDispatcher<{ toggle: boolean }>();
 </script>
 
-<Slider bind:checked {disabled} on:toggle={() => dispatch('toggle', checked)}>
-  <div class="flex h-[26px] place-items-center gap-1">
-    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
-      {title}
-    </label>
-    {#if isEdited}
-      <div
-        transition:fly={{ x: 10, duration: 200, easing: quintOut }}
-        class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
-      >
-        Unsaved change
-      </div>
-    {/if}
-  </div>
+<div class="flex place-items-center justify-between">
+  <div>
+    <div class="flex h-[26px] place-items-center gap-1">
+      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
+        {title}
+      </label>
+      {#if isEdited}
+        <div
+          transition:fly={{ x: 10, duration: 200, easing: quintOut }}
+          class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
+        >
+          Unsaved change
+        </div>
+      {/if}
+    </div>
 
-  <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
-</Slider>
+    <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+  </div>
+  <Slider bind:checked {disabled} on:toggle={() => dispatch('toggle', checked)} />
+</div>
diff --git a/web/src/lib/components/elements/slider.svelte b/web/src/lib/components/elements/slider.svelte
index 0b613ec010..77fe3da940 100644
--- a/web/src/lib/components/elements/slider.svelte
+++ b/web/src/lib/components/elements/slider.svelte
@@ -8,24 +8,21 @@
   const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
 </script>
 
-<div class="flex place-items-center justify-between">
-  <slot name="leading" />
-  <label class="relative inline-block h-[10px] w-[36px] flex-none">
-    <input
-      class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
-      type="checkbox"
-      bind:checked
-      on:click={onToggle}
-      {disabled}
-    />
+<label class="relative inline-block h-[10px] w-[36px] flex-none">
+  <input
+    class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
+    type="checkbox"
+    bind:checked
+    on:click={onToggle}
+    {disabled}
+  />
 
-    {#if disabled}
-      <span class="slider slider-disabled cursor-not-allowed" />
-    {:else}
-      <span class="slider slider-enabled cursor-pointer" />
-    {/if}
-  </label>
-</div>
+  {#if disabled}
+    <span class="slider slider-disabled cursor-not-allowed" />
+  {:else}
+    <span class="slider slider-enabled cursor-pointer" />
+  {/if}
+</label>
 
 <style>
   .slider {