From 61fd35684610c0cf1bda5370583532cb9936f532 Mon Sep 17 00:00:00 2001
From: Enciphered <shaamilahmed@gmail.com>
Date: Sun, 31 May 2026 06:19:14 +0500
Subject: [PATCH] style: resolve table scrollbar gap by using transparent
 scroll tracks and linear background gradient on container

---
 src/input.css                    | 4 ++--
 static/tailwind.css              | 4 ++--
 templates/components/macros.html | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/input.css b/src/input.css
index b1c0f5f..551bee7 100644
--- a/src/input.css
+++ b/src/input.css
@@ -76,7 +76,7 @@ html, body {
 /* Custom Scrollbars */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
+  scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
 }
 
 ::-webkit-scrollbar {
@@ -89,7 +89,7 @@ html, body {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.4); 
+  background: transparent; 
   border-radius: 9999px;
 }
 
diff --git a/static/tailwind.css b/static/tailwind.css
index cc9836a..a002041 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -2545,7 +2545,7 @@ html, body {
 }
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
+  scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
 }
 ::-webkit-scrollbar {
   width: 8px;
@@ -2555,7 +2555,7 @@ html, body {
   display: none;
 }
 ::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.4);
+  background: transparent;
   border-radius: 9999px;
 }
 ::-webkit-scrollbar-thumb {
diff --git a/templates/components/macros.html b/templates/components/macros.html
index c0bd1e3..7b645a0 100644
--- a/templates/components/macros.html
+++ b/templates/components/macros.html
@@ -392,7 +392,7 @@
 {% macro table_container_open(id, max_height="68vh") %}
 <!-- Table Container -->
 <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden">
-    <div id="{{ id }}-container" class="overflow-x-auto overflow-y-overlay scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }};">
+    <div id="{{ id }}-container" class="overflow-x-auto overflow-y-auto scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }}; background: linear-gradient(to bottom, #162031 58px, transparent 58px);">
 {% endmacro %}
 
 {% macro table_container_close(id) %}