From 7679b84b2e5c5ee7c1684f637369c72307cd30a5 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 16 Jun 2024 22:26:06 +0600
Subject: [PATCH] web/sidebar: optimize tab bar for mobile

---
 web/src/components/sidebar/Sidebar.svelte    | 9 +++++++++
 web/src/components/sidebar/SidebarTab.svelte | 4 ++++
 web/src/routes/+layout.svelte                | 2 +-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index b73e392e..11691748 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/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>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index e2f8c9b8..13593f60 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/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>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 25080a22..f3c34353 100644
--- a/web/src/routes/+layout.svelte
+++ b/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(