added helper scrip for vault installation in dev env

management-ui/src/customcompometns/DataTableNoCheckboxScroll.vue

@@ -37,18 +37,16 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
 </script>
 
 <template>
-  <div class="w-full h-full border rounded-md flex flex-col">
-    <!-- Both-direction scroll area -->
-    <ScrollArea class="flex-1 w-full">
-      <!-- The min-width container enables horizontal scroll on small displays -->
+  <!-- Parent must not rely on h-full; use overflow-hidden to contain scrollbars -->
+  <div class="w-full max-h-full border rounded-md flex flex-col overflow-hidden">
+    <!-- This element grows and can scroll internally -->
+    <ScrollArea class="flex-1 min-h-0 w-full">
+      <!-- min-width keeps horizontal scroll available when needed -->
       <div :class="['w-full', minWidthClass]">
-        <Table class="w-full">
-          <!-- header -->
+        <!-- separate borders help sticky headers render above rows -->
+        <Table class="w-full border-separate border-spacing-0">
           <TableHeader>
-            <TableRow
-              v-for="headerGroup in table.getHeaderGroups()"
-              :key="headerGroup.id"
-            >
+            <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
               <TableHead
                 v-for="header in headerGroup.headers"
                 :key="header.id"
@@ -60,8 +58,6 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
                   :props="header.getContext()"
                 />
               </TableHead>
-
-              <!-- extra empty head for dropdown column -->
               <TableHead
                 v-if="props.dropdownComponent"
                 class="sticky top-0 bg-background z-10 w-12"
@@ -69,7 +65,6 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
             </TableRow>
           </TableHeader>
 
-          <!-- body -->
           <TableBody>
             <template v-if="table.getRowModel().rows.length">
               <TableRow
@@ -77,18 +72,10 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
                 :key="row.id"
                 class="whitespace-nowrap"
               >
-                <!-- data cells -->
-                <TableCell
-                  v-for="cell in row.getVisibleCells()"
-                  :key="cell.id"
-                >
-                  <FlexRender
-                    :render="cell.column.columnDef.cell"
-                    :props="cell.getContext()"
-                  />
+                <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                 </TableCell>
 
-                <!-- dropdown cell -->
                 <TableCell v-if="props.dropdownComponent" class="text-right">
                   <component
                     :is="props.dropdownComponent"
@@ -101,7 +88,6 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
               </TableRow>
             </template>
 
-            <!-- no-data row -->
             <template v-else>
               <TableRow>
                 <TableCell
@@ -116,9 +102,9 @@ const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
         </Table>
       </div>
 
-      <!-- Scrollbars -->
+      <!-- Always show both scrollbars when needed -->
       <ScrollBar orientation="horizontal" />
       <ScrollBar orientation="vertical" />
     </ScrollArea>
   </div>
-</template>
+</template>