diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 1733cf09..64d4c4e3 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -60,7 +60,7 @@
         height: 100%;
         justify-content: space-between;
         padding: var(--sidebar-inner-padding);
-        padding-bottom: var(--border-radius);
+        padding-bottom: calc(var(--sidebar-inner-padding) * 2);
         overflow-y: scroll;
     }
 
@@ -79,6 +79,7 @@
             justify-content: center;
             align-items: flex-start;
             z-index: 3;
+            padding: var(--sidebar-inner-padding) 0;
         }
 
         #sidebar::before {
@@ -95,27 +96,26 @@
         #sidebar-tabs {
             overflow-y: visible;
             overflow-x: scroll;
-            padding-bottom: 0;
-            padding: var(--sidebar-inner-padding) 0;
+            padding: 0;
             height: fit-content;
         }
 
         #sidebar :global(.sidebar-inner-container:first-child) {
-            padding-left: calc(var(--border-radius) * 2);
+            padding-left: calc(var(--border-radius) * 1.5);
         }
 
         #sidebar :global(.sidebar-inner-container:last-child) {
-            padding-right: calc(var(--border-radius) * 2);
+            padding-right: calc(var(--border-radius) * 1.5);
         }
 
         #sidebar :global(.sidebar-inner-container:first-child:dir(rtl)) {
             padding-left: 0;
-            padding-right: calc(var(--border-radius) * 2);
+            padding-right: calc(var(--border-radius) * 1.5);
         }
 
         #sidebar :global(.sidebar-inner-container:last-child:dir(rtl)) {
             padding-right: 0;
-            padding-left: calc(var(--border-radius) * 2);
+            padding-left: calc(var(--border-radius) * 1.5);
         }
     }
 
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index aa0efc85..2e8dec68 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -58,7 +58,7 @@
         align-items: center;
         text-align: center;
         gap: 3px;
-        padding: var(--padding) 3px;
+        padding: 10px 3px;
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
         opacity: 0.75;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index da8387f6..a322dd47 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -149,15 +149,20 @@
         --sidebar-width: 80px;
         --sidebar-font-size: 11px;
         --sidebar-inner-padding: 4px;
+
+        /* reduce default inset by 5px if it's not 0 */
         --sidebar-height-mobile: calc(
-            50px + calc(var(--sidebar-inner-padding) * 2) +
-                env(safe-area-inset-bottom)
+            50px + calc(
+                env(safe-area-inset-bottom) - 5px * sign(
+                    env(safe-area-inset-bottom)
+                )
+            )
         );
 
         --safe-area-inset-top: env(safe-area-inset-top);
         --safe-area-inset-bottom: env(safe-area-inset-bottom);
 
-        --switcher-padding: var(--sidebar-inner-padding);
+        --switcher-padding: 4px;
 
         /* used for fading the tab bar on scroll */
         --sidebar-mobile-gradient: linear-gradient(
@@ -307,7 +312,11 @@
         #cobalt {
             display: grid;
             grid-template-columns: unset;
-            grid-template-rows: 1fr var(--sidebar-height-mobile);
+            grid-template-rows:
+                1fr
+                calc(
+                    var(--sidebar-height-mobile) + var(--sidebar-inner-padding) * 2
+                );
         }
 
         #content,