web/settings: calculate item padding properly

web/src/components/buttons/SettingsToggle.svelte

@@ -59,7 +59,7 @@
         justify-content: space-between;
         text-align: left;
         transform: none;
-        padding: 9px 16px;
+        padding: calc(var(--switcher-padding) * 2) 16px;
         border-radius: var(--border-radius);
     }
 </style>

web/src/components/buttons/Switcher.svelte

@@ -30,13 +30,14 @@
     .switcher.big {
         background: var(--button);
         box-shadow: var(--button-box-shadow);
-        padding: var(--sidebar-inner-padding);
+        padding: var(--switcher-padding);
     }
 
     .switcher.big :global(.button) {
         width: 100%;
-        height: calc(40px - var(--sidebar-inner-padding) * 1.5);
-        border-radius: calc(var(--border-radius) - var(--sidebar-inner-padding));;
+        /* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */
+        height: calc(40px - var(--switcher-padding) * 1.5);
+        border-radius: calc(var(--border-radius) - var(--switcher-padding));;
     }
 
     .switcher.big :global(.button:not(:focus-visible)) {

web/src/components/misc/Toggle.svelte

@@ -8,7 +8,7 @@
 
 <style>
     .toggle {
-        --base-size: 20px;
+        --base-size: 22px;
         --ratio-factor: 0.9;
 
         display: flex;

web/src/routes/+layout.svelte

@@ -57,6 +57,8 @@
         --sidebar-font-size: 11px;
         --sidebar-inner-padding: 4px;
 
+        --switcher-padding: var(--sidebar-inner-padding);
+
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
             rgba(0, 0, 0, 0.9) 0%,