From 049baa4313cca65917fad6d38a09deddf351d793 Mon Sep 17 00:00:00 2001
From: Sainan <63328889+Sainan@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:04:58 -0700
Subject: [PATCH] fix(webui): make sidebar sticky as intended (#2354)

also a bit of language-specific width adjustment

Reviewed-on: https://onlyg.it/OpenWF/SpaceNinjaServer/pulls/2354
Co-authored-by: Sainan <63328889+Sainan@users.noreply.github.com>
Co-committed-by: Sainan <63328889+Sainan@users.noreply.github.com>
---
 static/webui/index.html |  2 +-
 static/webui/script.js  |  6 ++++++
 static/webui/style.css  | 16 +++++++++++++---
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/webui/index.html b/static/webui/index.html
index 6c62867e..c228a9ef 100644
--- a/static/webui/index.html
+++ b/static/webui/index.html
@@ -75,7 +75,7 @@
                 </div>
             </div>
         </div>
-        <div class="w-100">
+        <div id="main-content" class="w-100">
             <div data-route="/webui/" data-title="Login | OpenWF WebUI">
                 <p data-loc="login_description"></p>
                 <form onsubmit="doLogin();return false;">
diff --git a/static/webui/script.js b/static/webui/script.js
index 9948247c..f648809c 100644
--- a/static/webui/script.js
+++ b/static/webui/script.js
@@ -2738,3 +2738,9 @@ function handleValenceBonusChange(event) {
         });
     });
 }
+
+document.querySelectorAll("#sidebar .nav-link").forEach(function (elm) {
+    elm.addEventListener("click", function () {
+        window.scrollTo(0, 0);
+    });
+});
diff --git a/static/webui/style.css b/static/webui/style.css
index 05677dd7..becce85d 100644
--- a/static/webui/style.css
+++ b/static/webui/style.css
@@ -4,9 +4,19 @@
     }
 
     body.logged-in #sidebar {
-        position: sticky;
-        top: 5rem;
-        margin-right: 3rem;
+        position: fixed;
+    }
+
+    body.logged-in #main-content {
+        margin-left: 7rem;
+    }
+
+    body.logged-in:has([data-lang="de"].active) #main-content {
+        margin-left: 8rem;
+    }
+
+    body.logged-in:has([data-lang="zh"].active) #main-content {
+        margin-left: 6rem;
     }
 
     body:not(.logged-in) #sidebar {