From a8a2efd0912eed769b0fd511e876a296d227b247 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Tue, 18 Mar 2025 13:49:35 +0100
Subject: [PATCH] Solved scrollbar issues

---
 app/static/css/custom_scrollbar.css | 24 +++++++++++-------------
 app/static/js/custom_scrollbar.js   | 18 ++++++++++++------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/static/css/custom_scrollbar.css b/app/static/css/custom_scrollbar.css
index d8e33f8..5ea5301 100644
--- a/app/static/css/custom_scrollbar.css
+++ b/app/static/css/custom_scrollbar.css
@@ -5,29 +5,27 @@
     /* Native Scrollbar ausblenden */
     scrollbar-width: none; /* Firefox */
   }
-  .scroll-container::-webkit-scrollbar {
+.scroll-container::-webkit-scrollbar {
     display: none; /* WebKit */
-  }
-  
-  /* Das benutzerdefinierte Scrollbar-Element fixiert am rechten Rand */
-  #custom-scrollbar {
+}
+
+#custom-scrollbar {
     position: fixed;
     top: 0;
     right: 0;
     width: 8px;
-    height: 100vh;
+    /* height: 100vh;  <-- diese Zeile entfernen oder anpassen */
     background: transparent;
-    /* pointer-events NICHT ausschalten, damit die Scrollbar bedienbar bleibt */
     transition: opacity 0.3s ease;
-    opacity: 1; /* dauerhaft sichtbar, wenn benötigt */
-  }
-  
-  /* Der Thumb der Scrollbar */
-  #scroll-thumb {
+    opacity: 1;
+}
+
+/* Der Thumb der Scrollbar */
+#scroll-thumb {
     position: absolute;
     top: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     border-radius: 4px;
-  }
+}
   
\ No newline at end of file
diff --git a/app/static/js/custom_scrollbar.js b/app/static/js/custom_scrollbar.js
index 64d0b46..59b12d9 100644
--- a/app/static/js/custom_scrollbar.js
+++ b/app/static/js/custom_scrollbar.js
@@ -1,12 +1,12 @@
 function adjustScrollContainerHeight() {
   const mainEl = document.getElementById('main');
   const scrollContainer = mainEl.querySelector('.scroll-container');
+  const scrollbarContainer = document.getElementById('custom-scrollbar');
   const container = mainEl.parentElement;
-  const scrollbarContainer = mainEl.parentElement.querySelector('#custom-scrollbar');
-  let siblingsHeight = 0;
   
+  let siblingsHeight = 0;
   Array.from(container.children).forEach(child => {
-    if(child !== mainEl && child !== scrollContainer && child !== scrollbarContainer) {
+    if(child !== mainEl && child !== scrollbarContainer) {
       const style = window.getComputedStyle(child);
       const height = child.offsetHeight;
       const marginTop = parseFloat(style.marginTop) || 0;
@@ -15,15 +15,21 @@ function adjustScrollContainerHeight() {
     }
   });
   
-  // Verfügbare Höhe berechnen: Fensterhöhe minus Höhe der Geschwister
+  // Berechne die verfügbare Höhe für den Scrollbereich
   const availableHeight = window.innerHeight - siblingsHeight;
-  
-  // Setze die max-Höhe für den Scroll-Container
   scrollContainer.style.maxHeight = availableHeight + 'px';
   scrollContainer.style.overflowY = 'auto';
   scrollContainer.style.overflowX = 'hidden';
+
+  // Hole die aktuelle Position und Höhe des Scrollbereichs
+  const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+  // Setze die Position (top) und die Höhe des benutzerdefinierten Scrollbar-Tracks
+  scrollbarContainer.style.top = scrollContainerRect.top + 'px';
+  scrollbarContainer.style.height = scrollContainerRect.height + 'px';
 }
 
+
 window.addEventListener('load', adjustScrollContainerHeight);
 window.addEventListener('resize', adjustScrollContainerHeight);