From 9fdc552fa90dd1372ff36534995b5c057e871e59 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 23 Jan 2026 02:14:40 -0800
Subject: refactor(layout): Replace empty p elements with reusable Spacer
 component

---
 src/lib/Settings/Categories/Attributions.svelte |  3 ++-
 src/lib/Settings/Categories/Cache.svelte        |  3 ++-
 src/lib/Settings/Categories/Debug.svelte        |  7 ++++---
 src/lib/Settings/Categories/Display.svelte      | 19 ++++++++++---------
 src/lib/Settings/Categories/SettingSync.svelte  |  5 +++--
 5 files changed, 21 insertions(+), 16 deletions(-)

(limited to 'src/lib/Settings/Categories')

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 />
-- 
cgit v1.2.3