web/sidebar: optimize tab bar for mobile

web/src/components/sidebar/Sidebar.svelte

@@ -84,6 +84,7 @@
             height: var(--sidebar-height-mobile);
             position: fixed;
             bottom: 0;
+            padding: 4px 0;
         }
 
         #sidebar::before {
@@ -103,5 +104,13 @@
             overflow-x: scroll;
             padding-bottom: 0;
         }
+
+        #sidebar :global(.sidebar-inner-container:first-child) {
+            padding-left: var(--padding);
+        }
+
+        #sidebar :global(.sidebar-inner-container:last-child) {
+            padding-right: var(--padding);
+        }
     }
 </style>

web/src/components/sidebar/SidebarTab.svelte

@@ -28,6 +28,8 @@
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
         opacity: 0.8;
+        height: fit-content;
+        -webkit-touch-callout: none;
     }
 
     .sidebar-tab.active {
@@ -55,8 +57,10 @@
             padding: 5px var(--padding);
             min-width: calc(var(--sidebar-width) / 2);
         }
+
         .sidebar-tab.active {
             z-index: 2;
+            border-radius: var(--border-radius);
         }
     }
 </style>

web/src/routes/+layout.svelte

@@ -31,7 +31,7 @@
         --border-radius: 11px;
 
         --sidebar-width: 80px;
-        --sidebar-height-mobile: 50px;
+        --sidebar-height-mobile: calc(52px + env(safe-area-inset-bottom));
         --sidebar-font-size: 11px;
 
         --sidebar-mobile-gradient: linear-gradient(