web/settings: move switcher description to correct component

web/src/components/buttons/SettingsToggle.svelte

@@ -49,7 +49,7 @@
     .toggle-parent {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 8px;
         overflow: hidden;
     }
 

web/src/components/buttons/Switcher.svelte

@@ -1,12 +1,24 @@
 <script lang="ts">
     export let big: boolean = false;
+    export let description: string = "";
 </script>
 
-<div id="switcher-container" class="switcher" class:big={big} role="listbox">
-    <slot></slot>
+<div class="switcher-parent">
+    <div class="switcher" class:big={big} role="listbox">
+        <slot></slot>
+    </div>
+    {#if description}
+        <div class="settings-content-description subtext">{description}</div>
+    {/if}
 </div>
 
 <style>
+    .switcher-parent {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
     .switcher {
         display: flex;
         width: auto;

web/src/components/settings/SettingsCategory.svelte

@@ -3,7 +3,6 @@
 
     export let sectionId: string;
     export let title: string;
-    export let description: string = "";
 
     let animate = false;
 
@@ -21,17 +20,13 @@
 >
     <h3 class="settings-content-title">{title}</h3>
     <slot></slot>
-
-    {#if description.length > 0}
-        <div class="settings-content-description subtext">{description}</div>
-    {/if}
 </section>
 
 <style>
     .settings-content {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: var(--padding);
         padding: calc(var(--settings-padding) / 2);
         border-radius: 18px;
     }