From 3527131cd7d9d4049abb7fb9ec13b0fa8aeb0abc Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 29 Jun 2024 23:31:40 +0600
Subject: [PATCH] web/settings: calculate item padding properly

---
 web/src/components/buttons/SettingsToggle.svelte | 2 +-
 web/src/components/buttons/Switcher.svelte       | 7 ++++---
 web/src/components/misc/Toggle.svelte            | 2 +-
 web/src/routes/+layout.svelte                    | 2 ++
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/components/buttons/SettingsToggle.svelte b/web/src/components/buttons/SettingsToggle.svelte
index 04dd9ac2..6ed93ef3 100644
--- a/web/src/components/buttons/SettingsToggle.svelte
+++ b/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>
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 515b137c..499dfa5a 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/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)) {
diff --git a/web/src/components/misc/Toggle.svelte b/web/src/components/misc/Toggle.svelte
index ed0dbb31..fcb0aa92 100644
--- a/web/src/components/misc/Toggle.svelte
+++ b/web/src/components/misc/Toggle.svelte
@@ -8,7 +8,7 @@
 
 <style>
     .toggle {
-        --base-size: 20px;
+        --base-size: 22px;
         --ratio-factor: 0.9;
 
         display: flex;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 163600ec..19cbae4a 100644
--- a/web/src/routes/+layout.svelte
+++ b/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%,