From 7f8f8a98816464f63cc19fcc6147a490bb58050d Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Tue, 5 Sep 2023 00:06:24 +0800
Subject: [PATCH] feat(connections): sticky table thead

---
 src/components/Collapse.tsx |  2 +-
 src/components/Header.tsx   |  2 +-
 src/pages/Connections.tsx   | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index b2f5e85..fe40d40 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -38,7 +38,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse-arrow collapse mb-2 select-none overflow-visible border-secondary bg-base-200',
+        'collapse collapse-arrow mb-2 select-none border-secondary bg-base-200',
       )}
     >
       <div
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d80c4d3..9ea8077 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -128,7 +128,7 @@ export const Header = () => {
   }
 
   return (
-    <ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
+    <ul class="navbar rounded-box sticky inset-x-0 top-2 z-50 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
       <div class="navbar-start gap-4">
         <div class={twMerge('drawer w-auto lg:hidden', '')}>
           <input
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 12bf96d..47a0b5c 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -237,7 +237,7 @@ export default () => {
   })
 
   return (
-    <div class="flex flex-col gap-4">
+    <div class="flex h-full flex-col gap-4 overflow-y-auto">
       <div class="flex w-full items-center gap-2">
         <input
           class="input input-primary flex-1"
@@ -268,15 +268,15 @@ export default () => {
         />
       </div>
 
-      <div class="overflow-x-auto whitespace-nowrap rounded-md">
-        <table class="table table-xs rounded-none bg-base-200">
-          <thead>
+      <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
+        <table class="table table-xs relative rounded-none">
+          <thead class="sticky top-0 z-10">
             <For each={table.getHeaderGroups()}>
               {(headerGroup) => (
                 <tr>
                   <For each={headerGroup.headers}>
                     {(header) => (
-                      <th class="bg-base-300">
+                      <th class="bg-base-200">
                         <div
                           class={twMerge(
                             'flex items-center justify-between gap-2',