fix(webui): make sidebar sticky as intended (#2354)

also a bit of language-specific width adjustment

Reviewed-on: #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

@@ -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;">

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);
+    });
+});

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 {