web/settings: mobile layout, better padding & borders

web/src/components/settings/SettingsCategory.svelte

@@ -16,6 +16,6 @@
     .settings-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: 10px;
     }
 </style>

web/src/components/settings/SettingsSection.svelte

@@ -25,4 +25,11 @@
         color: var(--gray);
         padding-left: 8px;
     }
+
+    @media screen and (max-width: 750px) {
+        #settings-section-categories {
+            background: var(--button);
+            border-radius: var(--border-radius);
+        }
+    }
 </style>

web/src/components/settings/SettingsTab.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
+
     export let tabName: string;
     export let tabLink: string;
     export let iconColor: "gray" | "blue" | "green" = "gray";
@@ -12,11 +14,15 @@
     class="settings-tab"
     href="/settings/{tabLink}"
     class:active={isActive}
->
-    <div class="tab-icon" style="background: var(--{iconColor})">
-        <slot></slot>
+>   
+    <div class="settings-tab-left">
+        <div class="tab-icon" style="background: var(--{iconColor})">
+            <slot></slot>
+        </div>
+        <span>{tabName}</span>
     </div>
-    <span>{tabName}</span>
+
+    <IconChevronRight class="settings-tab-chevron" />
 </a>
 
 <style>
@@ -25,6 +31,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: space-between;
         gap: calc(var(--small-padding) * 2);
         padding: 7px;
         font-weight: 500;
@@ -33,14 +40,36 @@
         border-radius: var(--border-radius);
     }
 
+    .settings-tab-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: calc(var(--small-padding) * 2);
+        font-weight: 500;
+    }
+
     .settings-tab :global(svg) {
-        stroke: var(--white);
         stroke-width: 1.5px;
         height: 18px;
         width: 18px;
     }
 
-    .settings-tab:hover {
+    .settings-tab .tab-icon :global(svg) {
+        stroke: var(--white);
+    }
+
+    :global(.settings-tab-chevron) {
+        display: none;
+        stroke: var(--secondary);
+    }
+
+    @media (hover: hover) {
+        .settings-tab:hover {
+            background: var(--button-hover-transparent);
+        }
+    }
+
+    .settings-tab:active {
         background: var(--button-hover-transparent);
     }
 
@@ -60,4 +89,20 @@
         padding: var(--small-padding);
         border-radius: var(--small-padding);
     }
+
+    @media screen and (max-width: 750px) {
+        .settings-tab {
+            background: none;
+            --small-padding: 5px;
+        }
+
+        .settings-tab :global(svg) {
+            height: 19px;
+            width: 19px;
+        }
+
+        :global(.settings-tab-chevron) {
+            display: block;
+        }
+    }
 </style>