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

45 files changed, 162 insertions, 95 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}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aa2a1e8f..5ba94ec7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
   import { env } from '$env/dynamic/public';
   import { userIdentity as getUserIdentity } from '$lib/Data/AniList/identity';
@@ -251,7 +252,7 @@
       </div>
     </div>
 
-    <p></p>
+    <Spacer />
 
     <NotificationsProvider zIndex={5000}>
       <Root {data} {way}>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6c10e31d..987e39b2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { onDestroy, onMount } from 'svelte';
   import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
   import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
@@ -34,7 +35,7 @@
 {#if data.user === undefined}
   <div class="card">Please log in to view due media.</div>
 
-  <p></p>
+  <Spacer />
 
   <Landing />
 {:else}
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index d2aef68b..f9fb433d 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import { onDestroy, onMount } from 'svelte';
   import userIdentity from '$stores/identity.js';
   import settings from '$stores/settings';
@@ -33,7 +34,7 @@
 {#if data.user === undefined}
   <div class="card">Please log in to view completed media.</div>
 
-  <p></p>
+  <Spacer />
 
   <Landing />
 {:else}
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 1c6e2524..fa833c1f 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Event from '$lib/Events/Event.svelte';
   import Message from '$lib/Loading/Message.svelte';
 
@@ -16,7 +17,7 @@
         <Event event={rawEvent} avatar />
 
         {#if i < events.length - 1}
-          <p></p>
+          <Spacer />
         {/if}
       {/each}
     {/if}
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index a30ab78c..2ac371f1 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { Group as GroupType } from '$lib/Database/SB/groups.js';
   import type { Event as EventType } from '$lib/Database/SB/events.js';
   import Message from '$lib/Loading/Message.svelte';
@@ -37,7 +38,7 @@
 
         <Group {group} />
 
-        <p></p>
+        <Spacer />
 
         <details open>
           <summary>Events</summary>
@@ -53,7 +54,7 @@
                   <Event event={asEvent(rawEvent)} />
 
                   {#if i < events.length - 1}
-                    <p></p>
+                    <Spacer />
                   {/if}
                 {/each}
               {/if}
diff --git a/src/routes/events/groups/+page.svelte b/src/routes/events/groups/+page.svelte
index a1b902ba..6b9d8a10 100644
--- a/src/routes/events/groups/+page.svelte
+++ b/src/routes/events/groups/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import type { Group as GroupType } from '$lib/Database/SB/groups';
   import Message from '$lib/Loading/Message.svelte';
   import root from '$lib/Utility/root';
@@ -29,7 +30,7 @@
         </a>
 
         {#if i < json.length - 1}
-          <p></p>
+          <Spacer />
         {/if}
       {/each}
     {:catch}
diff --git a/src/routes/girls/+page.svelte b/src/routes/girls/+page.svelte
index ecd4acd0..0dcf75c4 100644
--- a/src/routes/girls/+page.svelte
+++ b/src/routes/girls/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Senpy from '$lib/Data/senpy';
   import HeadTitle from '$lib/Home/HeadTitle.svelte';
   import Message from '$lib/Loading/Message.svelte';
@@ -27,7 +28,7 @@
     <div>
       The Senpy Club <span class="opaque">|</span> Anime Girls Holding Programming Books
 
-      <p></p>
+      <Spacer />
 
       <ul>
         <li>
@@ -65,7 +66,7 @@
   </div>
 </div>
 
-<p></p>
+<Spacer />
 
 <details class="languages" open>
   <summary>Languages</summary>
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 6502f2cb..160add29 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import Error from '$lib/Error/RateLimited.svelte';
   import { onMount } from 'svelte';
   import { parseOrDefault } from '$lib/Utility/parameters';
@@ -47,12 +48,12 @@
 		Crunchyroll Release Calender (Click to {crunchyrollExpanded ? 'collapse' : 'expand'})
 	</summary>
 
-	<p></p>
+	<Spacer />
 
 	<Crunchyroll />
 </details>
 
-<p></p> -->
+<Spacer /> -->
 
 {#if !$subsPlease}
   <Message message="Loading subtitle schedule ..." />
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 25b2f6e1..e8b79fa1 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   /* eslint svelte/no-at-html-tags: "off" */
 
   import Attributions from '$lib/Settings/Categories/Attributions.svelte';
@@ -50,7 +51,7 @@
     にDMを送ってください！
   {/if}
 
-  <!-- <p></p>
+  <!-- <Spacer />
 
 	<p>
 		<b>{$locale().settings.fields.notice}</b>
@@ -71,7 +72,7 @@
     </Category>
   </div>
 
-  <p></p>
+  <Spacer />
 
   <Category title={$locale().settings.display.title}><Display /></Category>
   <Category title={$locale().settings.calculation.title}><Calculation /></Category>
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 5997d262..4014c58f 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import HeadTitle from '$lib/Home/HeadTitle.svelte';
   import Picker from '$lib/Tools/Picker.svelte';
   import { tools } from '$lib/Tools/tools.js';
@@ -20,7 +21,7 @@
             {tools[t].name()}
           </span>
 
-          <p></p>
+          <Spacer />
 
           {#if tools[t].description}
             <span class="description">
@@ -32,7 +33,7 @@
     {/each}
   </div>
 
-  <p></p>
+  <Spacer />
 
   <blockquote style="margin: 0 0 0 1.5rem;">
     Have any requests for cool tools that you think others might find useful? Send a private message
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 2b09fd85..0cfe05fd 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import settings from '$stores/settings';
   import ParallaxImage from '../../../lib/Image/ParallaxImage.svelte';
   import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
@@ -302,7 +303,7 @@
             {#if schedule && preferences && preferences.biography && preferences.biography.length > 0}
               <br />
             {:else}
-              <p></p>
+              <Spacer />
             {/if}
 
             {#if $Profile.fetching}
@@ -325,7 +326,7 @@
   {/if}
 
   {#if schedule && preferences && preferences.pinned_hololive_streams.length > 0}
-    <p></p>
+    <Spacer />
 
     <div class="card">
       <div class="hololive-badges">
@@ -352,7 +353,7 @@
   {/if}
 
   {#if preferences && userData && userData.id === $identity.id}
-    <p></p>
+    <Spacer />
 
     <details open>
       <summary>{$locale().user.preferences.title}</summary>
@@ -367,7 +368,7 @@
       {$locale().user.preferences.hideMissingBadges.title}
       <SettingHint lineBreak>{$locale().user.preferences.hideMissingBadges.hint}</SettingHint>
 
-      <p></p>
+      <Spacer />
 
       <input
         type="checkbox"
@@ -378,7 +379,7 @@
       />
       {$locale().user.preferences.hideAWCBadges.title}
 
-      <p></p>
+      <Spacer />
 
       Pinned Categories
 
@@ -416,7 +417,7 @@
         </span>
       </div>
 
-      <p></p>
+      <Spacer />
 
       Biography
 
@@ -438,7 +439,7 @@
         placeholder="Markdown supported!"
       ></textarea>
 
-      <p></p>
+      <Spacer />
 
       Badge Wall Custom CSS
 
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index b0c83fd6..c9bb7454 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Spacer from '$lib/Layout/Spacer.svelte';
   import AWC from './../../../../lib/User/BadgeWall/AWC.svelte';
   import { user, type User } from '$lib/Data/AniList/user';
   import type { Badge } from '../../../../graphql/$types';
@@ -559,7 +560,7 @@
               <b>Notice:</b> The Badge Wall overseer system has detected badges containing
               AI-generated material on your wall. {shadowHiddenCount} of your badges have been shadow
               hidden.
-              <p></p>
+              <Spacer />
               You may use the "Un-shadow Hide Badges" button to unhide these badges, from where you will
               be required to use the hide feature to hide these badges from the public, while allowing
               them to stay visible to you as the account holder.
@@ -570,10 +571,10 @@
               material, this includes Badge Wall. If you have collected badges with AI-generated
               elements, kindly use the hide feature to hide these badges from the public, while
               allowing them to stay visible to you as the account holder.
-              <p></p>
+              <Spacer />
               Failure to comply with this request at your earliest convenience will result in the hiding
               of all badges from your Badge Wall.
-              <p></p>
+              <Spacer />
               <button
                 on:click={async () => {
                   noticeDismissed = true;
@@ -586,7 +587,7 @@
             </div>
           {/if}
 
-          <p></p>
+          <Spacer />
 
           <div class="card">
             {#if authorised}
@@ -661,7 +662,7 @@
                   )
                 ])}
 
-                <p></p>
+                <Spacer />
 
                 {#if error}
                   <p style="color: red;">{error}</p>
@@ -738,7 +739,7 @@
                   <small>Must be full date and time, defaults to now if any fields empty</small>
                 </span>
 
-                <p></p>
+                <Spacer />
 
                 <div class="edit-row-2">
                   <input
@@ -826,7 +827,7 @@
           </div>
         {/if}
 
-        <p></p>
+        <Spacer />
 
         {#if loadQueryParameter === 'none'}
           <div class="card">
@@ -885,7 +886,7 @@
   <Popup fullscreen onLeave={() => (importMode = false)} show={importMode}>
     {$locale().user.badges.importMode.title}
 
-    <p></p>
+    <Spacer />
 
     <input
       type="text"
@@ -904,7 +905,7 @@
       size="20"
     />
 
-    <p></p>
+    <Spacer />
 
     <input type="checkbox" id="import_links" name="import_links" bind:checked={importLinks} />
     {$locale().user.badges.importMode.importLinks.title}
@@ -912,12 +913,12 @@
       {$locale().user.badges.importMode.importLinks.hint}
     </SettingHint>
 
-    <p></p>
+    <Spacer />
 
     <input type="checkbox" id="import_links" name="import_links" bind:checked={importReplies} />
     {$locale().user.badges.importMode.importReplies}
 
-    <p></p>
+    <Spacer />
 
     <button
       on:click={() => {
@@ -932,7 +933,7 @@
       {$locale().user.badges.importMode.fetch}
     </button>
 
-    <p></p>
+    <Spacer />
 
     <details>
       <summary>{$locale().user.badges.importMode.dangerous}</summary>
@@ -954,7 +955,7 @@
     </details>
 
     {#if importImages && importImages.length > 0}
-      <p></p>
+      <Spacer />
 
       {$locale({
         values: {
@@ -979,7 +980,7 @@
 <Popup fullscreen onLeave={() => (migrateMode = false)} show={migrateMode}>
   Migrate Category
 
-  <p></p>
+  <Spacer />
 
   <input
     type="text"
@@ -999,7 +1000,7 @@
   />
   <SettingHint lineBreak>Leave category empty to migrate all to or from uncategorised.</SettingHint>
 
-  <p></p>
+  <Spacer />
 
   <button
     on:click={() => {
@@ -1023,7 +1024,7 @@
     versa.
   </SettingHint>
 
-  <p></p>
+  <Spacer />
 
   <input
     type="text"
@@ -1035,7 +1036,7 @@
   />
   <SettingHint lineBreak>Leave category field empty to hide all.</SettingHint>
 
-  <p></p>
+  <Spacer />
 
   <button
     on:click={() => {