From 3d5663655fed4263712b7777702877331449c8c0 Mon Sep 17 00:00:00 2001
From: maxlerebourg <maxlerebourg@gmail.com>
Date: Wed, 18 Feb 2026 09:19:32 +0100
Subject: [PATCH] fix: make webui sidebar responsive on mobile

On small screens the sidebar now collapses out of view by default,
replaced by a visible toggle button that slides it back in. Without
this, the sidebar occupied the full screen width on phones and tablets,
leaving no room for page content.

Co-authored-by: Ben McClelland <ben.mcclelland@versity.com>
---
 webui/web/buckets.html   | 23 +++++++++++++++++------
 webui/web/dashboard.html | 23 +++++++++++++++++------
 webui/web/explorer.html  | 25 +++++++++++++++++--------
 webui/web/users.html     | 23 +++++++++++++++++------
 4 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/webui/web/buckets.html b/webui/web/buckets.html
index e98cea50..565a6f9e 100644
--- a/webui/web/buckets.html
+++ b/webui/web/buckets.html
@@ -87,10 +87,21 @@ under the License.
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
 
-  <div class="flex h-screen overflow-hidden">
+  <div class="relative flex h-screen overflow-hidden">
+    <input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
+    <label for="sidebar-toggle" aria-label="Toggle navigation" class="
+      sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
+      flex justify-center items-center p-2 rounded-lg transition-all
+      text-charcoal-300 hover:text-charcoal hover:bg-gray-100
+      peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
+    ">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
+        <path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
+      </svg>
+    </label>
     <!-- Sidebar -->
-    <aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
-      <div class="h-16 flex items-center px-6 border-b border-white/10">
+    <aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
+      <div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
         <a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
           <img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
         </a>
@@ -166,8 +177,8 @@ under the License.
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col overflow-hidden">
-      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
-        <h1 class="text-xl font-semibold text-charcoal">VersityGW Buckets</h1>
+      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+        <h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Buckets</h1>
         <button onclick="loadBuckets()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
@@ -175,7 +186,7 @@ under the License.
         </button>
       </header>
 
-      <main class="flex-1 overflow-auto p-8">
+      <main class="flex-1 overflow-auto p-6">
         <div class="max-w-7xl mx-auto">
           <!-- Page Header -->
           <div class="flex items-center justify-between mb-6">
diff --git a/webui/web/dashboard.html b/webui/web/dashboard.html
index 8d391dbd..855a3431 100644
--- a/webui/web/dashboard.html
+++ b/webui/web/dashboard.html
@@ -49,10 +49,21 @@ under the License.
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
 
-  <div class="flex h-screen overflow-hidden">
+  <div class="relative flex h-screen overflow-hidden">
+    <input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
+    <label for="sidebar-toggle" aria-label="Toggle navigation" class="
+      sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
+      flex justify-center items-center p-2 rounded-lg transition-all
+      text-charcoal-300 hover:text-charcoal hover:bg-gray-100
+      peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
+    ">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
+        <path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
+      </svg>
+    </label>
     <!-- Sidebar -->
-    <aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
-      <div class="h-16 flex items-center px-6 border-b border-white/10">
+    <aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
+      <div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
         <a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
           <img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
         </a>
@@ -130,8 +141,8 @@ under the License.
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col overflow-hidden">
-      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
-        <h1 class="text-xl font-semibold text-charcoal">VersityGW Dashboard</h1>
+      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+        <h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Dashboard</h1>
         <div class="flex items-center gap-4">
           <button onclick="loadDashboard()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -141,7 +152,7 @@ under the License.
         </div>
       </header>
 
-      <main class="flex-1 overflow-auto p-8">
+      <main class="flex-1 overflow-auto p-6">
         <div class="max-w-7xl mx-auto">
           <!-- Metric Cards -->
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
diff --git a/webui/web/explorer.html b/webui/web/explorer.html
index 13dabbf8..c4615bec 100644
--- a/webui/web/explorer.html
+++ b/webui/web/explorer.html
@@ -52,10 +52,21 @@ under the License.
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
 
-  <div class="flex h-screen overflow-hidden">
+  <div class="relative flex h-screen overflow-hidden">
+    <input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
+    <label for="sidebar-toggle" aria-label="Toggle navigation" class="
+      sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
+      flex justify-center items-center p-2 rounded-lg transition-all
+      text-charcoal-300 hover:text-charcoal hover:bg-gray-100
+      peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
+    ">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
+        <path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
+      </svg>
+    </label>
     <!-- Sidebar -->
-    <aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
-      <div class="h-16 flex items-center px-6 border-b border-white/10">
+    <aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
+      <div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
         <a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
           <img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
         </a>
@@ -133,10 +144,8 @@ under the License.
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col overflow-hidden">
-      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
-        <div class="flex items-center gap-4">
-          <h1 class="text-xl font-semibold text-charcoal">VersityGW Explorer</h1>
-        </div>
+      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+        <h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Explorer</h1>
         <div id="header-actions" class="flex items-center gap-2 hidden">
           <button onclick="refresh()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -190,7 +199,7 @@ under the License.
         </div>
       </div>
 
-      <main class="flex-1 overflow-auto p-8" id="drop-zone">
+      <main class="flex-1 overflow-auto p-6" id="drop-zone">
         <div class="max-w-7xl mx-auto">
           <!-- Drop Zone Overlay (hidden by default) -->
           <div id="drop-overlay" class="hidden fixed inset-0 z-40 bg-accent/10 border-4 border-dashed border-accent flex items-center justify-center">
diff --git a/webui/web/users.html b/webui/web/users.html
index 0b699106..8d9dc1bf 100644
--- a/webui/web/users.html
+++ b/webui/web/users.html
@@ -80,10 +80,21 @@ under the License.
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
 
-  <div class="flex h-screen overflow-hidden">
+  <div class="relative flex h-screen overflow-hidden">
+    <input id="sidebar-toggle" type="checkbox" class="peer hidden"/>
+    <label for="sidebar-toggle" aria-label="Toggle navigation" class="
+      sm:hidden rotate-180 peer-checked:rotate-0 absolute z-20 top-[14px] left-6
+      flex justify-center items-center p-2 rounded-lg transition-all
+      text-charcoal-300 hover:text-charcoal hover:bg-gray-100
+      peer-checked:text-white/70 peer-checked:hover:text-white peer-checked:hover:bg-white/10
+    ">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="-0.5 0 25 25">
+        <path stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M7.6728 22L16.1434 13.0294C16.4081 12.75 16.4081 12.3088 16.1434 12.0147L7.65808 3" />
+      </svg>
+    </label>
     <!-- Sidebar -->
-    <aside class="w-60 bg-charcoal flex flex-col flex-shrink-0">
-      <div class="h-16 flex items-center px-6 border-b border-white/10">
+    <aside class="absolute z-10 sm:static -translate-x-60 peer-checked:translate-x-0 sm:!translate-x-0 w-60 h-screen bg-charcoal flex flex-col overflow-auto transition-all">
+      <div class="ml-12 sm:ml-0 h-16 flex-shrink-0 flex items-center px-6 border-b border-white/10">
         <a href="https://www.versity.com" target="_blank" rel="noopener noreferrer">
           <img src="assets/images/Versity-logo-white-horizontal.png" alt="Versity" class="h-10 hover:opacity-80 transition-opacity">
         </a>
@@ -159,8 +170,8 @@ under the License.
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col overflow-hidden">
-      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-shrink-0">
-        <h1 class="text-xl font-semibold text-charcoal">VersityGW Users</h1>
+      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0">
+        <h1 class="ml-12 sm:ml-0 text-xl font-semibold text-charcoal">VersityGW Users</h1>
         <button onclick="loadUsers()" class="p-2 text-charcoal-300 hover:text-charcoal hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
@@ -168,7 +179,7 @@ under the License.
         </button>
       </header>
 
-      <main class="flex-1 overflow-auto p-8">
+      <main class="flex-1 overflow-auto p-6">
         <div class="max-w-7xl mx-auto">
           <!-- Page Header -->
           <div class="flex items-center justify-between mb-6">