From 5a2c1bb82997e623fd996ed8a4ffc6955b49651b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 30 Jun 2024 15:58:40 +0600
Subject: [PATCH] web/settings: unfuck tab padding on mobile

---
 .../settings/SettingsSection.svelte           | 11 ++------
 .../components/settings/SettingsTab.svelte    | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte
index 2c0abf0b..127f2012 100644
--- a/web/src/components/settings/SettingsSection.svelte
+++ b/web/src/components/settings/SettingsSection.svelte
@@ -33,15 +33,8 @@
             box-shadow: var(--button-box-shadow);
         }
 
-        #settings-section-categories > :global(:not(.settings-tab:last-child)) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            box-shadow: 0 3px 0px -1.2px var(--button-stroke);
-        }
-
-        #settings-section-categories > :global(:not(.settings-tab:first-child)) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+        #settings-section-title {
+            padding-left: calc(7px * 1.5);
         }
     }
 </style>
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte
index 607977b2..e8cf8f93 100644
--- a/web/src/components/settings/SettingsTab.svelte
+++ b/web/src/components/settings/SettingsTab.svelte
@@ -29,12 +29,13 @@
 <style>
     .settings-tab {
         --small-padding: 4px;
+        --big-padding: 7px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         gap: calc(var(--small-padding) * 2);
-        padding: 7px;
+        padding: var(--big-padding);
         font-weight: 500;
         background: var(--primary);
         color: var(--button-text);
@@ -46,14 +47,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: calc(var(--small-padding) * 2);
+        gap: calc(var(--big-padding) * 1.5);
         font-weight: 500;
     }
 
     .settings-tab :global(svg) {
         stroke-width: 1.5px;
-        height: 18px;
-        width: 18px;
+        height: 20px;
+        width: 20px;
     }
 
     .settings-tab .tab-icon :global(svg) {
@@ -95,13 +96,22 @@
     @media screen and (max-width: 750px) {
         .settings-tab {
             background: none;
-            padding: 9px;
-            --small-padding: 5px;
+            padding: var(--big-padding) calc(var(--big-padding) * 1.5);
         }
 
-        .settings-tab :global(svg) {
-            height: 19px;
-            width: 19px;
+        .settings-tab-left {
+            gap: calc(var(--big-padding) * 1.5);
+        }
+
+        .settings-tab:not(:last-child) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            box-shadow: 0 3px 0px -1.7px var(--button-stroke);
+        }
+
+        .settings-tab:not(:first-child) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
         }
 
         .settings-tab-chevron :global(svg) {