8 files changed, 27 insertions, 19 deletions
diff --git a/src/lib/Settings/Categories/Attributions.svelte b/src/lib/Settings/Categories/Attributions.svelte
index 28f69a74..e0a77f1f 100644
--- a/src/lib/Settings/Categories/Attributions.svelte
+++ b/src/lib/Settings/Categories/Attributions.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import root from '$lib/Utility/root';
 </script>
 
@@ -34,7 +35,7 @@
 		</li> -->
 </ul>
 
-<p></p>
+<Spacer />
 
 <details open class="card-clear">
   <summary>Outbound Link Disclaimer</summary>
diff --git a/src/lib/Settings/Categories/Cache.svelte b/src/lib/Settings/Categories/Cache.svelte
index ba7e2842..337d4a41 100644
--- a/src/lib/Settings/Categories/Cache.svelte
+++ b/src/lib/Settings/Categories/Cache.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings from '$stores/settings';
 </script>
 
@@ -7,7 +8,7 @@
   <a href="https://due.moe">due.moe</a>'s site data will clear these caches too.
 </small>
 
-<p></p>
+<Spacer />
 
 Re-cache AniList media lists every
 <input
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 2f74a3c7..1b6cbedd 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings from '$stores/settings';
   import { addNotification } from '$lib/Notification/store';
   import SettingHint from '../SettingHint.svelte';
@@ -25,7 +26,7 @@
 
 <button on:click={clearCaches}>{$locale().debug.clearCaches}</button>
 
-<p></p>
+<Spacer />
 
 <button
   on:click={() => {
@@ -43,7 +44,7 @@
   {$locale().debug.resetAllSettings.hint}
 </SettingHint>
 
-<p></p>
+<Spacer />
 
 <button
   on:click={async () => {
@@ -61,7 +62,7 @@
   {$locale().debug.clearLocalStorage.hint2}
 </SettingHint>
 
-<p></p>
+<Spacer />
 
 Custom CSS
 <textarea bind:value={$settings.displayCustomCSS}></textarea>
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index ebbaf6e7..d9dad534 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings from '$stores/settings';
   import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
   import SettingHint from '../SettingHint.svelte';
@@ -85,7 +86,7 @@
 <SettingHint lineBreak>
   Media where either the next episode's release date is unknown or the chapter count could not be
   resolved is considered unresolved.
-  <p></p>
+  <Spacer />
   <span>
     Additionally, you hard exclude specific media from <a href={root('/')}>due.moe</a> on AniList.
     To exclude any media from being included in <b>any</b> <a href={root('/')}>due.moe</a>
@@ -107,7 +108,7 @@
   </span>
 </SettingHint>
 
-<p></p>
+<Spacer />
 
 <b>{$locale().settings.display.categories.hidePanels}</b><br />
 <SettingCheckboxToggle
@@ -160,7 +161,7 @@
   }}
 />
 
-<p></p>
+<Spacer />
 
 <b>{$locale().settings.display.categories.motionAndAccessibility.title}</b><br />
 <SettingCheckboxToggle
@@ -200,7 +201,7 @@
   </button>
 {/if}
 
-<p></p>
+<Spacer />
 
 <SettingCheckboxToggle
   setting="displayAniListNotifications"
@@ -227,7 +228,7 @@
   </SettingHint>
 </SettingCheckboxToggle>
 
-<p></p>
+<Spacer />
 
 <b>{$locale().settings.display.categories.dateAndTime.title}</b><br />
 <SettingCheckboxToggle
@@ -247,7 +248,7 @@
   text={$locale().settings.display.categories.dateAndTime.fields.abbreviateCountdown}
 />
 
-<p></p>
+<Spacer />
 
 <SettingCheckboxToggle
   setting="displayDisableLastActivityWarning"
@@ -262,7 +263,7 @@
   </SettingHint>
 </SettingCheckboxToggle>
 
-<p></p>
+<Spacer />
 
 <b>Show lists with media covers instead of text</b><br />
 <SettingCheckboxToggle setting="displayCoverModeAnime" text="Anime" lineBreak={false} />
@@ -298,7 +299,7 @@
   <br />
 {/if}
 
-<p></p>
+<Spacer />
 
 <b>List sort & filter</b><br />
 <select bind:value={$settings.displayAnimeSort}>
@@ -364,7 +365,7 @@ Anime sort order
   <br />
 {/if}
 
-<p></p>
+<Spacer />
 
 <select bind:value={$settings.displayOutboundLinksTo}>
   <option value="anilist">AniList</option>
diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
index 9fd01b0e..183dc13f 100644
--- a/src/lib/Settings/Categories/SettingSync.svelte
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { options } from '$lib/Notification/options';
   import root from '$lib/Utility/root';
   import identity from '$stores/identity';
@@ -48,7 +49,7 @@
   <SettingHint lineBreak>
     {$locale().settings.settingsSync.buttons.pull.hint}
   </SettingHint>
-  <p></p>
+  <Spacer />
   <button
     on:click={() => {
       $settings.settingsSync = true;
@@ -106,7 +107,7 @@
     {$locale().settings.settingsSync.buttons.delete}
   </button>
 
-  <p></p>
+  <Spacer />
 
   <b>Last Push</b>: {$locale().dateFormatter($settingsSyncTimes.lastPush)}
   <br />
diff --git a/src/lib/Settings/Category.svelte b/src/lib/Settings/Category.svelte
index 5771e8eb..f4936e8a 100644
--- a/src/lib/Settings/Category.svelte
+++ b/src/lib/Settings/Category.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   export let title = '';
   export let id = title.toLowerCase();
   export let open = true;
@@ -14,5 +15,5 @@
 </details>
 
 {#if newLine}
-  <p></p>
+  <Spacer />
 {/if}
diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
index 16741cef..751a085c 100644
--- a/src/lib/Settings/SettingCheckboxToggle.svelte
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings, { type Settings } from '$stores/settings';
 
   type BooleanSettingsKeys<T> = {
@@ -79,5 +80,5 @@
 {/if}
 
 {#if sectionBreak}
-  <p></p>
+  <Spacer />
 {/if}
diff --git a/src/lib/Settings/SettingToggle.svelte b/src/lib/Settings/SettingToggle.svelte
index ac494e44..c2c3f3ff 100644
--- a/src/lib/Settings/SettingToggle.svelte
+++ b/src/lib/Settings/SettingToggle.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings, { type Settings } from '$stores/settings';
 
   export let setting: keyof Settings;
@@ -31,5 +32,5 @@
 <br />
 
 {#if sectionBreak}
-  <p></p>
+  <Spacer />
 {/if}