style: resolve table scrollbar gap by using transparent scroll tracks and linear background gradient on container

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

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 {

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) %}