Changes to blocks

style.css

@@ -25,20 +25,24 @@ Version: 1.0
 
 /* Side content - absolute or fixed position */
 #lcp-sidecontent {
-    position: absolute; /* or fixed depending on your JS logic */
+    position: absolute; /* Positioned relative to the parent with position: relative */
     left: 0;
-    background: #fff;
-    width: 340px; /* Fixed width of 340px */
-    height: 100%;
-    overflow: scroll;
-    z-index: 2;
-    border-right: 2px solid #eee;
-    outline: 0;
     top: var(--my-top); /* Dynamically controlled top position via JS */
+    width: 340px; /* Fixed width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Allow scrolling inside */
+    background: #fff;
+    border-right: 2px solid #eee;
+    z-index: 2;
+    outline: 0;
+}
+
+#lcp-sidecontent.lcp-fixed {
+    position:fixed
 }
 
 /* Main content */
-.lcp-viewport.has-sidecontent #lcp-main-content {
+.has-sidecontent #lcp-main-wrap {
     flex: 1; /* Main content takes up the rest of the space */
     margin-left: 340px; /* Space for side content */
     padding: 20px;
@@ -100,3 +104,46 @@ Version: 1.0
     background: red;
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#lcp-sidecontent {
+
+    overflow: hidden; /* Hide native scrollbar */
+}
+
+#lcp-sidecontent-inner {
+    height: 100%;
+    overflow: auto; /* Enable scrolling for inner content */
+    padding-right: 15px; /* Space for the custom scrollbar */
+}
+
+#lcp-scroll-track {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 5px;
+    height: 100%;
+    background-color: #e0e0e0;
+}
+
+#lcp-scroll-bar {
+    width: 100%;
+    background-color: #333;
+    cursor: pointer;
+    border-radius: 5px;
+}