web/sidebar: redo padding on mobile & desktop

- accommodate space for scaling animation
- replace static padding with variable in calculations
- no more weird padding on mobile

web/src/components/sidebar/CobaltLogo.svelte

@@ -11,7 +11,12 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: calc(var(--padding) * 2 - 2px);
+        padding: calc(var(--padding) * 2);
+
+        /* accommodate space for scaling animation */
+        padding-bottom: calc(
+            var(--padding) * 2 - var(--sidebar-inner-padding)
+        );
     }
 
     @media screen and (max-width: 535px) {

web/src/components/sidebar/Sidebar.svelte

@@ -56,9 +56,8 @@
     #sidebar {
         background: var(--sidebar-bg);
         height: 100vh;
-        width: var(--sidebar-width);
+        width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2);
         position: sticky;
-        padding: 0 var(--sidebar-inner-padding);
     }
 
     #sidebar-tabs {
@@ -66,6 +65,8 @@
         justify-content: space-between;
         padding-bottom: var(--padding);
         overflow-y: scroll;
+        padding: var(--sidebar-inner-padding);
+        width: var(--sidebar-width);
     }
 
     @media screen and (max-width: 535px) {
@@ -80,8 +81,8 @@
             height: var(--sidebar-height-mobile);
             position: fixed;
             bottom: 0;
-            padding: var(--sidebar-inner-padding) 0;
             justify-content: center;
+            align-items: flex-start;
         }
 
         #sidebar::before {
@@ -99,6 +100,9 @@
             overflow-y: visible;
             overflow-x: scroll;
             padding-bottom: 0;
+            padding: var(--sidebar-inner-padding) 0;
+            width: unset;
+            height: fit-content;
         }
 
         #sidebar :global(.sidebar-inner-container:first-child) {

web/src/components/sidebar/SidebarTab.svelte

@@ -27,10 +27,10 @@
     $: if (isTabActive && tab) {
         showTab(tab);
 
-        tab.classList.add("animate")
+        tab.classList.add("animate");
         setTimeout(() => {
-            tab.classList.remove("animate")
-        }, 220)
+            tab.classList.remove("animate");
+        }, 220);
     }
 </script>
 
@@ -90,15 +90,19 @@
         transform: scale(0.95);
     }
 
+    :global([data-reduce-motion="true"]) .sidebar-tab:active:not(.active) {
+        transform: none;
+    }
+
     @keyframes pressButton {
         0% {
-            transform: scale(0.95)
+            transform: scale(0.95);
         }
         50% {
-            transform: scale(1.01)
+            transform: scale(1.01);
         }
         100% {
-            transform: none
+            transform: none;
         }
     }
 
@@ -129,13 +133,13 @@
 
         @keyframes pressButton {
             0% {
-                transform: scale(0.9)
+                transform: scale(0.9);
             }
             60% {
-                transform: scale(1.01)
+                transform: scale(1.015);
             }
             100% {
-                transform: scale(1)
+                transform: scale(1);
             }
         }
     }