feat(connections): sticky table thead

vAHiD55555 · Sep 4, 2023 · 7f8f8a9 · 7f8f8a9
1 parent 3728cd2
commit 7f8f8a9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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',