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>

management-ui/src/customcompometns/DeviceTasksDialog.vue

@@ -59,7 +59,7 @@ function fmt(ts?: string | null) {
 
 const task_columns: ColumnDef<TaskDto, any>[] = [
   { accessorKey: 'id', header: 'ID' },
-//   { accessorKey: 'deviceGuid', header: 'GUID' },
+  //   { accessorKey: 'deviceGuid', header: 'GUID' },
   { accessorKey: 'type', header: 'Task' },
   {
     accessorKey: 'payload',
@@ -77,9 +77,9 @@ const task_columns: ColumnDef<TaskDto, any>[] = [
       const s = row.original.status
       const cls =
         s === 'finished' ? 'px-2 py-0.5 rounded text-xs text-green-700 bg-green-100'
-        : s === 'running' ? 'px-2 py-0.5 rounded text-xs text-blue-700 bg-blue-100'
-        : s === 'error' ? 'px-2 py-0.5 rounded text-xs text-red-700 bg-red-100'
-        : 'px-2 py-0.5 rounded text-xs text-amber-700 bg-amber-100'
+          : s === 'running' ? 'px-2 py-0.5 rounded text-xs text-blue-700 bg-blue-100'
+            : s === 'error' ? 'px-2 py-0.5 rounded text-xs text-red-700 bg-red-100'
+              : 'px-2 py-0.5 rounded text-xs text-amber-700 bg-amber-100'
       return h('span', { class: cls }, s)
     },
   },
@@ -100,7 +100,7 @@ const task_columns: ColumnDef<TaskDto, any>[] = [
 
 <template>
   <Dialog :open="props.modelValue" @update:open="(v: boolean) => emit('update:modelValue', v)">
-    <DialogContent class="sm:min-w-[1000px]">
+    <DialogContent class="sm:min-w-[1200px] max-h-[80vh] p-0 flex flex-col">
       <DialogHeader class="flex flex-row items-center justify-between gap-4">
         <div>
           <DialogTitle>Tasks</DialogTitle>
@@ -119,7 +119,10 @@ const task_columns: ColumnDef<TaskDto, any>[] = [
         Loading tasks…
       </div>
       <div v-else>
-        <DataTableNoCheckboxScroll :columns="task_columns" :data="tasks" minTableWidth="min-w-[800px]"/>
+        <!-- SCROLLABLE MIDDLE: flex-1 + min-h-0 so child can overflow -->
+        <div class="flex-1 min-h-0 px-6 pb-4">
+          <DataTableNoCheckboxScroll :columns="task_columns" :data="tasks" minTableWidth="min-w-[800px]" />
+        </div>
       </div>
 
       <DialogFooter>