refactor(layout): Replace empty p elements with reusable Spacer component

33 files changed, 111 insertions, 56 deletions

diff --git a/src/lib/Announcement.svelte b/src/lib/Announcement.svelte
index 8f05d6f1..9a348f7a 100644
--- a/src/lib/Announcement.svelte
+++ b/src/lib/Announcement.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Popup from './Layout/Popup.svelte';
   import announcementHash from '$stores/announcementHash';
   import { env } from '$env/dynamic/public';
@@ -40,7 +41,7 @@
       {line}<br />
     {/each}
 
-    <p></p>
+    <Spacer />
 
     <button on:click={dismiss} class="dismiss">{dismissButton || 'Dismiss'}</button>
   </Popup>
diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
index d5d51530..5813ce51 100644
--- a/src/lib/Error/AnimeRateLimited.svelte
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Popup from '$lib/Layout/Popup.svelte';
 </script>
 
@@ -9,7 +10,7 @@
 
   {#await fetch('https://api.waifu.pics/sfw/cry') then response}
     {#await response.json() then json}
-      <p></p>
+      <Spacer />
 
       <a href={`https://trace.moe/?url=${encodeURIComponent(json.url)}`} target="_blank">
         <img src={json.url} alt="" style="width: 30vw;" />
diff --git a/src/lib/Error/RateLimited.svelte b/src/lib/Error/RateLimited.svelte
index 4e395c70..5a729c87 100644
--- a/src/lib/Error/RateLimited.svelte
+++ b/src/lib/Error/RateLimited.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   export let type = 'Media';
   export let loginSessionError = true;
   export let contact = true;
@@ -27,7 +28,7 @@
         <slot />
 
         {#if contact}
-          <p></p>
+          <Spacer />
 
           If the problem persists, please contact
           <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
@@ -51,7 +52,7 @@
     <slot />
 
     {#if contact}
-      <p></p>
+      <Spacer />
 
       If the problem persists, please contact
       <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte
index 7e45ea3d..877dc316 100644
--- a/src/lib/Hololive/Lives.svelte
+++ b/src/lib/Hololive/Lives.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Message from '$lib/Loading/Message.svelte';
   import root from '$lib/Utility/root';
   import type { Live, ParseResult } from './hololive';
@@ -68,7 +69,7 @@
   {/each}
 </div>
 
-<p></p>
+<Spacer />
 
 <div class="container">
   {#each categorisedStreams.upcoming as live}
@@ -76,7 +77,7 @@
   {/each}
 </div>
 
-<p></p>
+<Spacer />
 
 <div class="container">
   {#each categorisedStreams.ended as live}
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 541c3c36..5e2d4ccd 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import root from './Utility/root';
   import { env } from '$env/dynamic/public';
   import tooltip from './Tooltip/tooltip';
@@ -30,7 +31,7 @@
   </div>
 </div>
 
-<p></p>
+<Spacer />
 
 <div class="example-item card">
   <div class="card item-description">
@@ -53,7 +54,7 @@
   </div>
 </div>
 
-<p></p>
+<Spacer />
 
 <div class="example-item card">
   <div class="item-content">
diff --git a/src/lib/Layout/Spacer.svelte b/src/lib/Layout/Spacer.svelte
new file mode 100644
index 00000000..a26796df
--- /dev/null
+++ b/src/lib/Layout/Spacer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+</script>
+
+<div class="spacer {size}"></div>
+
+<style>
+  .spacer {
+    width: 100%;
+  }
+
+  .spacer.sm {
+    height: 0.75em;
+  }
+
+  .spacer.md {
+    height: 1.5em;
+  }
+
+  .spacer.lg {
+    height: 2.25em;
+  }
+</style>
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 5130cc2a..1a3cd7cc 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   /* eslint svelte/no-at-html-tags: "off" */
 
   import settings from '$stores/settings';
@@ -159,7 +160,7 @@
     {/each}
   </select>
 
-  <p></p>
+  <Spacer />
 {/if}
 
 {#if $settings.displayCoverModeAnime}
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index f22291f2..4f285b47 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { mediaListCollection, Type, type Media } from '$lib/Data/AniList/media';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import { onMount } from 'svelte';
@@ -94,7 +95,7 @@
 />
 
 {#if $settings.displayPlannedAnime}
-  <p></p>
+  <Spacer />
 
   <AnimeList
     {endTime}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 290646a5..a4159dfa 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { Media } from '$lib/Data/AniList/media';
   import Error from '$lib/Error/RateLimited.svelte';
   import { volumeCount } from '$lib/Media/Manga/volumes';
@@ -124,7 +125,7 @@
 
 {#if media.length === 0 && !rateLimited}
   {#if rateLimited}
-    <p></p>
+    <Spacer />
   {/if}
 
   <p>
@@ -149,7 +150,7 @@
     {/each}
   </select>
 
-  <p></p>
+  <Spacer />
 {/if}
 
 {#if $settings.displayCoverModeManga || dummy}
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
index 18b483cb..3f93d107 100644
--- a/src/lib/Loading/Skeleton.svelte
+++ b/src/lib/Loading/Skeleton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   export let count = 3;
   export let width = '100%';
   export let height = '100px';
@@ -31,7 +32,7 @@
     </div>
 
     {#if !list && i < count - 1}
-      <p></p>
+      <Spacer />
     {/if}
   {/each}
 {/if}
diff --git a/src/lib/Schedule/Crunchyroll.svelte b/src/lib/Schedule/Crunchyroll.svelte
index 066a5d22..9d7c8e70 100644
--- a/src/lib/Schedule/Crunchyroll.svelte
+++ b/src/lib/Schedule/Crunchyroll.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import crunchyroll from '$lib/Data/Static/crunchyroll.json';
   import './container.css';
 
@@ -61,7 +62,7 @@
       </details>
     </div>
 
-    <p></p>
+    <Spacer />
   {/each}
 
   <div class="card day">
@@ -76,7 +77,7 @@
     </details>
   </div>
 
-  <p></p>
+  <Spacer />
 
   <div class="card day">
     <details open class="details-unstyled">
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}
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index fda912e7..e439ed4d 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import {
     activityHistory,
     fillMissingDays,
@@ -79,18 +80,18 @@
       <div class="card">
         <ActivityHistoryGrid {user} />
 
-        <p></p>
+        <Spacer />
 
         <div id="grid-final"></div>
 
         {#if generated}
-          <p></p>
+          <Spacer />
         {/if}
 
         <button on:click={screenshot}>Generate grid image</button>
       </div>
 
-      <p></p>
+      <Spacer />
 
       <details open>
         <summary>Days in risk of developing an activity history hole</summary>
diff --git a/src/lib/Tools/DumpProfile.svelte b/src/lib/Tools/DumpProfile.svelte
index 0d38d857..704bca8a 100644
--- a/src/lib/Tools/DumpProfile.svelte
+++ b/src/lib/Tools/DumpProfile.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { dumpUser } from '$lib/Data/AniList/user';
   import RateLimited from '$lib/Error/RateLimited.svelte';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -36,7 +37,7 @@
     <pre>{JSON.stringify(dump, null, 2)}</pre>
 
     {#if decoded && (dump.about || '').includes('[](json')}
-      <p></p>
+      <Spacer />
 
       <pre>{JSON.stringify(decoded, null, 2).replaceAll(/\\n/g, '\n')}</pre>
     {/if}
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 840ce410..71e13add 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { threads } from '$lib/Data/AniList/forum';
   import { onMount } from 'svelte';
   import { clearAllParameters } from '../Utility/parameters';
@@ -54,7 +55,7 @@
       </p>
     {/await}
   {:else}
-    <p></p>
+    <Spacer />
 
     Enter a username to search for to continue.
   {/if}
diff --git a/src/lib/Tools/Hayai.svelte b/src/lib/Tools/Hayai.svelte
index 07b666e9..79459985 100644
--- a/src/lib/Tools/Hayai.svelte
+++ b/src/lib/Tools/Hayai.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { onMount } from 'svelte';
   import JSZip from 'jszip';
 
@@ -90,13 +91,13 @@
     )}
   </small>
 
-  <p></p>
+  <Spacer />
 
   {@html applyBionicReadingToString(
     `After selecting an EPUB file, 早い will apply a bionic reading filter over any and all words, and return the newly created "bionic" EPUB file.`
   )}
 
-  <p></p>
+  <Spacer />
 
   <input type="file" id="epub-file" accept=".epub" on:change={handleFileUpload} />
 </div>
diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
index 8d946074..c0ee4f1d 100644
--- a/src/lib/Tools/InputTemplate.svelte
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { clearAllParameters } from '$lib/Utility/parameters';
   import { onMount } from 'svelte';
   import SettingHint from '$lib/Settings/SettingHint.svelte';
@@ -64,7 +65,7 @@
   {#if submission !== ''}
     <slot />
   {:else}
-    <p></p>
+    <Spacer />
 
     {prompt}
   {/if}
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 25375d31..34a9b48e 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { followers } from '$lib/Data/AniList/following';
   import RateLimited from '$lib/Error/RateLimited.svelte';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -21,7 +22,7 @@
   {:then users}
     {@const user = users[Math.floor(randomSeed * users.length)]}
 
-    <p></p>
+    <Spacer />
 
     <a href={`https://anilist.co/user/${user.id}`} target="_blank">
       <TextSwap text={user.name} />
diff --git a/src/lib/Tools/SequelCatcher/List.svelte b/src/lib/Tools/SequelCatcher/List.svelte
index 64f4f88c..a7e03ed0 100644
--- a/src/lib/Tools/SequelCatcher/List.svelte
+++ b/src/lib/Tools/SequelCatcher/List.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { filterRelations, type Media } from '$lib/Data/AniList/media';
   import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
   import { outboundLink } from '$lib/Media/links';
@@ -30,7 +31,7 @@ paused)
 <input type="checkbox" bind:checked={includeSideStories} /> Include side stories (e.g., OVAs,
 specials, etc.)
 
-<p></p>
+<Spacer />
 
 <ol class="media-list">
   {#each filterRelations( mediaListUnchecked.filter((media) => media.mediaListEntry?.status === 'COMPLETED'), includeSideStories ) as { media, unwatchedRelations }}
diff --git a/src/lib/Tools/SequelCatcher/Tool.svelte b/src/lib/Tools/SequelCatcher/Tool.svelte
index 4038c04e..05227ac4 100644
--- a/src/lib/Tools/SequelCatcher/Tool.svelte
+++ b/src/lib/Tools/SequelCatcher/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import List from './List.svelte';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import userIdentity from '$stores/identity';
@@ -71,7 +72,7 @@
       <Message message="" loader="ripple" slot withReload fullscreen>Error fetching media.</Message>
     {/await}
 
-    <p></p>
+    <Spacer />
 
     <blockquote style="margin: 0 0 0 1.5rem;">
       Thanks to <Username username="sevengirl" /> and <Username username="esthereae" /> for the idea!
diff --git a/src/lib/Tools/SequelSpy/Tool.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
index 8a289105..998cab13 100644
--- a/src/lib/Tools/SequelSpy/Tool.svelte
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
   import { onMount } from 'svelte';
@@ -54,7 +55,7 @@
       <Prequels {currentPrequels} />
     {/await}
 
-    <p></p>
+    <Spacer />
 
     The count ratio is the number of episodes you've seen of any direct prequels, and the total
     number of episodes of all direct prequels.
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
index a7b6da10..314dce18 100644
--- a/src/lib/Tools/Tracker/Tool.svelte
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { v6 as uuidv6 } from 'uuid';
   import { database, type TrackerEntry } from '$lib/Database/IDB/tracker';
   import { onMount } from 'svelte';
@@ -76,7 +77,7 @@
   <input type="number" placeholder="Progress (defaults to 0)" bind:value={progress} />
   <button class="button-lined" on:click={() => addEntry(url, title, progress)}> Add </button>
 
-  <p></p>
+  <Spacer />
 
   {#if masterList === null}
     <Message message="Loading entries ..." />
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index 64e4e2ea..bc28f97e 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import './wrapped.css';
   import userIdentity from '$stores/identity';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
@@ -908,7 +909,7 @@
         <div id="wrapped-final"></div>
 
         {#if generated}
-          <p></p>
+          <Spacer />
 
           <blockquote style="margin: 0 0 0 1.5rem;">
             Click on the image to download, or right click and select "Save Image As...".
@@ -917,7 +918,7 @@
       </div>
 
       {#if generated}
-        <p></p>
+        <Spacer />
       {/if}
 
       <div id="options" class="card">
diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte
index 49431494..8d340282 100644
--- a/src/lib/User/BadgeWall/AWC.svelte
+++ b/src/lib/User/BadgeWall/AWC.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { AWCBadgesGroup } from '$lib/Data/awc';
   import { cdn, thumbnail } from '$lib/Utility/image';
   import type { Preferences } from '../../../graphql/$types';
@@ -72,7 +73,7 @@
               {group.group}
             </summary>
 
-            <p></p>
+            <Spacer />
 
             <div class="badges">
               {#each group.badges as badge, index}
@@ -92,7 +93,7 @@
             </div>
           </details>
 
-          <p></p>
+          <Spacer />
         {/each}
       {/if}
     {/await}
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index c15ecd52..46aa2d46 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { thumbnail } from '$lib/Utility/image';
   import type { Badge } from '$lib/Database/SB/User/badges';
   import { cdn } from '$lib/Utility/image';
@@ -115,7 +116,7 @@
           </a>
         </div>
 
-        <p></p>
+        <Spacer />
       {/if}
     </div>
 
@@ -124,7 +125,7 @@
         {$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))}
 
         {#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description}
-          <p></p>
+          <Spacer />
         {:else if selectedBadge.description}
           <br />
         {/if}
@@ -133,7 +134,7 @@
       {#if selectedBadge.description}
         {selectedBadge.description}
 
-        <p></p>
+        <Spacer />
       {/if}
 
       {#if selectedBadge.designer}
diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte
index 9bc213f8..e7e1e9f3 100644
--- a/src/lib/User/BadgeWall/Badges.svelte
+++ b/src/lib/User/BadgeWall/Badges.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
   import tooltip from '$lib/Tooltip/tooltip';
   import locale from '$stores/locale';
@@ -36,7 +37,7 @@
   <details open={categoryFilter ? categoryFilter === category : true}>
     <summary>{category}</summary>
 
-    <p></p>
+    <Spacer />
 
     <div class="badges">
       {#each badges as badge}
@@ -93,6 +94,6 @@
   </details>
 
   {#if groupedBadges[groupedBadges.length - 1][0] !== category}
-    <p></p>
+    <Spacer />
   {/if}
 {/each}