From 121d680bc7854937c610b60872f8b3ea50022217 Mon Sep 17 00:00:00 2001
From: KubaPro010 <kuba.pro010@gmail.com>
Date: Sat, 27 Dec 2025 22:44:12 +0100
Subject: [PATCH] .

---
 modules/web.html | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/modules/web.html b/modules/web.html
index 5616164..8d08534 100644
--- a/modules/web.html
+++ b/modules/web.html
@@ -18,6 +18,7 @@
             .left{flex:1.2; min-width:420px}
             .right{flex:1; display:flex; flex-direction:column; gap:12px}
 
+            /* Collapsible Header Styling */
             .frame-title{ font-size:16px; color:var(--muted); margin-bottom:8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
             .frame-title:hover { color: #fff; }
             .frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; }
@@ -25,7 +26,7 @@
             .box { transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
             .box.collapsed { flex-grow: 0 !important; flex-shrink: 0; flex-basis: auto !important; }
             .box.collapsed .collapsible-content { display: none; }
-            .box.collapsed .frame-title::after { transform: rotate(-90deg); }
+            .box.collapsed .frame-title::after { transform: rotate(90deg); }
             .box.collapsed .frame-title { margin-bottom: 0; }
 
             .now, .next {margin-bottom:12px}
@@ -51,28 +52,34 @@
 
             .controls{display:flex; gap:8px; margin-top:8px}
             .box{display:flex; flex-direction:column; gap:8px; flex-grow: 1; overflow: hidden;}
-            .listbox{height:100%; min-height:100px; overflow:auto; border-radius:6px; background:var(--card); padding:8px; font-size:14px;}
+            
+            /* --- HIDE SCROLLBARS ON ALL LISTBOXES --- */
+            .listbox{
+                height:100%; 
+                min-height:100px; 
+                overflow:auto; 
+                border-radius:6px; 
+                background:var(--card); 
+                padding:8px; 
+                font-size:14px;
+                scrollbar-width: none; /* For Firefox */
+            }
+            .listbox::-webkit-scrollbar {
+                display: none; /* For Chrome, Safari, and other WebKit browsers */
+            }
+
             .listbox div.item{ padding:6px; border-radius:6px; transition: background-color 0.2s ease; }
             .listbox div.item:hover{background:rgba(255,255,255,0.04); cursor:pointer}
             .listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
             
+            /* --- STICKY QUEUE IMPLEMENTATION --- */
             #section-playlist {
                 flex: 1 1 0; /* Let it grow and shrink, with a zero basis */
                 min-height: 150px; /* Ensure it's always at least this tall */
             }
             #section-queue {
-                flex: 0 0 240px; /* Don't grow, don't shrink, and have a fixed height */
+                flex: 0 0 160px; /* Don't grow, don't shrink, and have a fixed height */
             }
-
-            #playlist-box, #queue-box {
-                height: 100%;
-                overflow-y: auto;
-                scrollbar-width: none; /* For Firefox */
-            }
-            #playlist-box::-webkit-scrollbar, #queue-box::-webkit-scrollbar {
-                display: none; /* For Chrome, Safari, etc. */
-            }
-
             #section-queue .frame-title {
                 cursor: default;
             }